浅谈一下Vue3的TreeShaking特性
什么是Treeshaking？
Treeshaking是一个术语,通常用于描述移除JavaScript中无用代码的过程。
在Vue3中,借助于它的编译优化,可以显著减少打包后的大小。
Vue3的Treeshaking实现
Vue3中的Treeshaking主要通过以下两点实现:
源码级的Tree-shaking
Vue3源码采用ES module编写。
这可以确保编译时只引入实际使用的代码,没有引入无用模块。
比如通过按需引入 Composition API,而不是全量引入等。
编译阶段的静态提升
Vue3的编译器可以检测在模板、JSX中没有被使用的模块,直接舍弃不打包这些模块。
同时还会执行常量提升、代码inline等优化。
大幅减少模块引用。
优势
相比Vue2有以下优势:
-
提升了运行效率,减少内存消耗;
-
减少打包后大小,加快应用加载;
-
依赖更精确,编译效率更高。
编译比较
假设有一个组件库my-lib,包含按钮、弹窗、表单等20个组件。
vue2导入：
// 导入整个my-lib
import * as myLib from 'my-lib' // 注册2个组件
components: {'my-button': myLib.Button,'my-dialog': myLib.Dialog
}
打包后my-lib整个大小200kb,实际只用了2个组件。
vue3导入：
// 按需导入
import {Button, Dialog} from 'my-lib'components: {'my-button': Button,'my-dialog': Dialog
}
打包后只包含用到的Button和Dialog代码,总大小仅为30kb。
结论及总结
打包体积比较
Vue2: 200kb
Vue3: 30kb
在这个例子中,Vue3的Tree-shaking使得打包体积减少了约85%,只包含实际用到的代码,而不是打包整个库。
这展示了在同样代码条件下,通过Tree-shaking,Vue3可以明显减小打包体积,起到很好的优化效果。