vue3加入的新特性Tree-Shaking介绍及原理

一、Tree-Shaking是什么

Tree-Shaking最先在rollup.js中应用，后来webpack，vite。简单来说就是移除掉项目中永远不会被执行的代码（dead code），即代码虽然依赖某个模块，但只使用其中的某些功能，通过Tree-shaking，将没有使用的模块代码移除掉，削减项目的体积。

1. tree-shaking是依赖于ES6的模块特性，即模块必须是ESM（ES Module）。这是因为ES6模块的依
赖关系是确定的、静态的，和运行的时的状态无关，可以进行静态分析。

2. tree-shaking只对使用export导出的变量生效

二、Tree-Shaking的原理

分析静态代码很困难，所以他们给我们提供一个机制，你需要明确告诉这部分代码没有副作用可以移除。/*#__PURE__*/就是解决这个问题的办法，只需要在方法前面加上上面的代码，程序运行的时候就会认为他是没有副作用的，可以放心的进行Tree-shaking。 

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

在vue3源码引入tree shaking特性，将全局 API 进行分块。如果你不使用其某些功能，它们将不会包含在你的基础包中，这样在编译时就能确定模块的依赖关系，以及输入和输出的变量。

三、Tree-Shaking的作用

通过Tree shaking，Vue3给我们带来的好处是：

• 程序体积更小
• 程序执行时间更快
• 程序低耦合便于未来架构的优化

即 Vue 3.0的模块化系统允许你按需加载组件，只引入应用所需的部，避免将整个Vue库全部打包进应用中，从而减小了代码体积；

Vue 3.0的编译器会将模板中未被使用的部分自动优化掉。这意味着如果你的模板中有未使用的元素或指令，它们将不会出现在最终的渲染函数中，从而减少了代码的大小。

四、为什么vue2不支持 Tree-Shaking

Vue 2的设计和构建是基于 ES5 时代完成，大多数功能和组件是以对象的形式暴露出来的，而且整个库的组织方式和设计没有针对 Tree-shaking 这种高级的代码优化进行特别的优化。

1. ES5 构建： Vue 2的构建版本基于 ES5 ，它不太支持按需引入。

2. 组件导入方式： 在 Vue 2中，大部分组件是通过直接引入 Vue 对象的属性来使用的，这导致整个 Vue 对象以及所有的属性都会被包含进最终的构建中，无法精确地按需引入。

3. 组件间关系： Vue 2组件在定义和使用时的关系较为复杂，可能会造成不同组件之间的依赖关系和引用关系，这也会影响 Tree-shaking 的效果。

vue3中为了适配vue2的option Api编写了大量的兼容代码，因而当我们在代码中不再使用options Api，就可以通过一个叫做__VUE_OPTIONS_API__的特性开关去关闭这个特性，这样最终打包的Vue代码就不会包含这部分，进而减少代码体积,⚠️禁用此功能将减小打包结果的体积，但如果第三方库依赖选项式 API，则可能影响兼容性。