Vue3全局Api支持tree-shaking后的一些变更
Posted 月岛蘑菇
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue3全局Api支持tree-shaking后的一些变更相关的知识,希望对你有一定的参考价值。
全局Api目前支持tree-shaking
2.x不支持tree-shaking
tree-shaking,即死代码消除,但是由于2.x的一些api,如Vue.nextTick()方法,即使不被使用,也会被最终打包
3.x中支持了tree-shaking所引起的变化
在 Vue 3 中,全局和内部 API 都经过了重构,并考虑到了 tree-shaking 的支持。因此,全局 API 现在只能作为 ES 模块构建的命名导出进行访问。
// 2.x
import Vue from \'vue\'
Vue.nextTick(() => {
// 一些和DOM有关的东西
})
// 3.x
import { nextTick } from \'vue\'
nextTick(() => {
// ...
})
直接调用Vue.nextTick()将会导致undefined is not a function
通过这一更改,Vue应用程序中未使用的全局api将从最终捆绑包中消除,从而获得最佳文件大小
受到影响的Api
- Vue.nextTick
- vue.observable
- Vue.version
- Vue.compile
- Vue.set
- vue.delete
内部帮助器
除了公共api,许多内部组件/帮助其现在也被导出为命名导出,只有当编译器的输出是这些特性时,才允许编译器导入这些特性
<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]])])
}
这意味着只有在应用程序实际使用了Transition组件的时候才会导入他
以上仅适用于 ES Modules builds,用于支持 tree-shaking 的绑定器——UMD 构建仍然包括所有特性,并暴露 Vue 全局变量上的所有内容 (编译器将生成适当的输出,以使用全局外的 api 而不是导入)。
在插件中的用法
// 2.x
const plugin = {
install: Vue => {
Vue.nextTick(() => {
// ...
})
}
}
// 3.x
import { nextTick } from \'vue\'
const plugin = {
install: app => {
nextTick(() => {
// ...
})
}
}
如果使用 webpack 这样的模块捆绑包,这可能会导致 Vue 的源代码绑定到插件中,而且通常情况下,这并不是你所期望的。防止这种情况发生的一种常见做法是配置模块绑定器以将 Vue 从最终捆绑中排除。对于 webpack,你可以使用 externals 配置选项:
// webpack.config.js
module.exports = {
externals: {
vue: \'Vue\'
}
}
// 这将会告诉webpack将Vue模块视为一个外部库,而不是捆绑他
如果你选择的模块绑定器恰好是 Rollup,你基本上可以免费获得相同的效果,因为默认情况下,Rollup 会将绝对模块 id (在我们的例子中为 \'vue\') 作为外部依赖项,而不会将它们包含在最终的 bundle 中。但是在绑定期间,它可能会发出一个“将 vue 作为外部依赖” 警告,可使用 external 选项抑制该警告:
// rollup.config.js
export default {
/*...*/
external: [\'vue\']
}
以上是关于Vue3全局Api支持tree-shaking后的一些变更的主要内容,如果未能解决你的问题,请参考以下文章
Vuejs1029- 源码浅析-Vue3中的13个全局 API