浅谈一下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
}
1
2
3
4
5
6
7
8

打包后my-lib整个大小200kb,实际只用了2个组件。

vue3导入：

// 按需导入
import {Button, Dialog} from 'my-lib'

components: {
  'my-button': Button,
  'my-dialog': Dialog 
}
1
2
3
4
5
6
7

打包后只包含用到的Button和Dialog代码,总大小仅为30kb。

结论及总结

打包体积比较

Vue2: 200kb
Vue3: 30kb

在这个例子中,Vue3的Tree-shaking使得打包体积减少了约85%,只包含实际用到的代码,而不是打包整个库。

这展示了在同样代码条件下,通过Tree-shaking,Vue3可以明显减小打包体积,起到很好的优化效果。