是什么

Tree-shaking 是一种通过清除多余代码来优化项目打包体积的技术，专业术语为：Dead code elimination.

简单来说就是在保持代码运行结果不变的前提下去除无用的代码。

在 Vue2 中，无论我们使用什么功能，它们最终都会出现在打包产物中，主要原因是 Vue 实例在项目中是单例的，程序无法检测到该实例对象的哪些属性在代码中会被使用到。

而 Vue3 引入 Tree-shaking 特性，将全局 api 进行分块，如果某些功能不被使用到，那么它们将不会出现在打包产物中。

如何做

Tree-shaking 是基于 ES6 模板语法（import 和 exports），主要借助 ES6 模块的静态编译思想，在编译的时候就能确定模块之间的依赖关系，以及输入和输出的变量。

Tree-shaking 一共做了两件事：

  • 编译阶段利用 ES6 Moudle 判断哪些模块已经加载
  • 判断哪些模块和变量未被使用 / 引用，进而删除

作用

通过 Tree-shaking，Vue3 的好处有：

  • 减少程序的体积（更小）
  • 减少程序运行时间（更快）
  • 便于对程序架构进行优化（更友好）