全局 API 的 tree shaking"/>
Vue 3 迁移策略笔记—— 第15节:全局 API 的 tree shaking
前言
本笔记主要基于官方文档《迁移策略—— 全局 API Treeshaking》汇总而来。如有理解出入,请以官方文档为主。建议您以官方文档为主,本文为辅。这样您可以“以自己为主”审视的阅读,从而不被我的观点带偏。
概述
Vue 3.x 对 部分全局 API 实现了 tree shacking 功能。
知识储备:什么是 tree shaking?
tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性,例如
import
和export
。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup。新的 webpack 4 正式版本,扩展了这个检测能力,通过
package.json
的"sideEffects"
属性作为标记,向 compiler 提供提示,表明项目中的哪些文件是 “pure(纯的 ES2015 模块)”,由此可以安全地删除文件中未使用的部分。摘抄自——《webpack——tree shaking》
作用:tree shaking 的作用是移除项目代码中上下文中的未引用代码(dead-code),已达到实现项目打包文件的精简。
前提:tree shaking 基于 ES2015
模块系统。也就是项目中对模块的应用和导出需要用到import
、export
。
Vue 2.x 全局 API 的使用方法
在 Vue 2.x 中,我们使用全局 API (如:nextTick
) 是不需要我们手动去导入的。如下:
import Vue from 'vue'Vue.nextTick(() => {// something DOM-related
})
也就是说,Vue 的全局 API 不是通过 ES2015
模块系统导入的。结合 tree shaking 的前提,就可以知道在 Vue 2.x 中,就算我们的代码没有使用到全局 API。在项目打包的时候,这些全局 API 相关的dead-code
依旧会被一同打包进来。这样就造成项目打包的代码存在多余代码。为此,Vue 3.x 对部分全局 API 的引用做出了改变。
Vue 3.x 部分全局 API 的使用方法
为了在 Vue 3.x 项目中能够使用tree shaking,Vue 3.x 明确规定了部分 API 需要手动使用 ES2015
模块系统的方法(即,·import·)去导入。如下:
import { nextTick } from 'vue'nextTick(() => {// something DOM-related
})
Vue 2.x 中被涉及的 API 有:
Vue.nextTick
Vue.observable
(replaced byVue.reactive
)Vue.version
Vuepile
(only in full builds)Vue.set
(only in compat builds)Vue.delete
(only in compat builds)
组件内部的 helpers(帮助器)
除了部分全局 API,许多内部组件或 helpers(帮助器)也是使用的 tree shaking,从而实现编译器只打包被使用的 features
功能。如下:
<transition><div v-show="ok">hello</div>
</transition>
上面代码会被编译器转化为:
import { h, Transition, withDirectives, vShow } from 'vue'export function render() {return h(Transition, [withDirectives(h('div', 'hello'), [[vShow, this.ok]])])
}
插件中使用全局 API 用法
Vue 3.x 在插件中使用全局 API 同样需要显示的导入:
import { nextTick } from 'vue'const plugin = {install: app => {nextTick(() => {// ...})}
}
如何在 Vue 3.x 项目中启用tree shaking
需要注意的是,并不是在 Vue 3.x 中依照上面的模式编写代码就直接使用 tree shacking 功能了。Vue 中开启 tree shaking 需要在支持 tree shaking 的 bundlers
(如:Webpack、Rollup)上使用才有效。
Webpack 中的启用tree shaking
在 Webpack 开启 tree shacking 需要在配置文件中做如下配置:
// webpack.config.js
module.exports = {/*...*/externals: {vue: 'Vue'}
}
Rollup 中的启用tree shaking
在 Rollup 中默认启用 tree shacking,但是会发出警告:'vue'
“Treating vue as external dependency”。可以通过以下配置关闭这个警告。
// rollup.config.js
export default {/*...*/external: ['vue']
}
关于 Webpack 和 Rollup 使用 tree shaking 更详细得说明,请看 Vue 官方文档:.html#usage-in-plugins
本系列目录
-
Vue 3 迁移策略笔记—— 第1节:v-for 中的 Ref 数组
-
Vue 3 迁移策略笔记—— 第2节:Async Components 异步组件
-
Vue 3 迁移策略笔记—— 第3节:Attribute Coercion Behavior (属性强制行为)
-
Vue 3 迁移策略笔记——第4节:$attrs 包括class&style
-
Vue 3 迁移策略笔记—— 第5节:移除 $children
-
Vue 3 迁移策略笔记—— 第6节:自定义指令
-
Vue 3 迁移策略笔记—— 第7节:自定义元素交互
-
Vue 3 迁移策略笔记—— 第8节:Data 选项
-
Vue 3 迁移策略笔记—— 第9节:新增 emits 选项
-
Vue 3 迁移策略笔记—— 第10节:事件 API
-
Vue 3 迁移策略笔记—— 第11节:移除过滤器
-
Vue 3 迁移策略笔记—— 第12节:片段
-
Vue 3 迁移策略笔记—— 第13节:函数式组件
-
Vue 3 迁移策略笔记—— 第14节:全局 API
-
Vue 3 迁移策略笔记—— 第15节:全局 API 的 tree shaking
-
Vue 3 迁移策略笔记—— 第16节:Inline Template 属性
-
Vue 3 迁移策略笔记—— 第17节:Key 属性
-
Vue 3 迁移策略笔记—— 第18节:按键修饰符
-
Vue 3 迁移策略笔记—— 第19节:移除 $listeners
-
Vue 3 迁移策略笔记—— 第20节:Props 的默认值函数不能访问this
-
Vue 3 迁移策略笔记—— 第21节:渲染函数 API
-
Vue 3 迁移策略笔记—— 第22节:Slots 的统一
-
Vue 3 迁移策略笔记—— 第23节:Transition Class 的变化
-
Vue 3 迁移策略笔记—— 第24节:Transition Group 不再需要设置根元素
-
Vue 3 迁移策略笔记—— 第25节:v-on.native修饰符被移除
-
Vue 3 迁移策略笔记—— 第26节:在组件上使用 v-model 的变化
-
Vue 3 迁移策略笔记—— 第27节:v-if 和 v-for 的优先级
-
Vue 3 迁移策略笔记—— 第28节:v-bind 合并行为
-
Vue 3 迁移策略笔记—— 第29节:数组的监听
更多推荐
Vue 3 迁移策略笔记—— 第15节:全局 API 的 tree shaking
发布评论