tree-shaking

tree-shaking：在代码打包时，去除未使用的代码，来优化项目打包体积的技术

条件：esm，并且按需导入才行
原理：依赖 es6 模块结构的静态（导入导出）分析，让打包工具可以识别出没有使用到的代码

过程

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

静态分析：在代码编译阶段，对整个应用程序进行静态分析，确定模块之间的依赖关系。
标记未被引用的代码：通过静态分析，标记出哪些代码被其他模块所引用，而哪些代码没有被引用。
删除未被引用的代码：标记完成后，将那些未被引用的代码从最终的构建输出中“摇晃”出去，不包含在生成的文件中。
优化输出：去除未被引用的代码后，对最终的输出文件进行优化，确保删除了所有未使用的部分。

vue2 和 vue3 对 tree-shaking 的对比

在 vue2 和 vue3 的区别中，有个点就是 vue3 采用了更有效的树摇（Tree - shaking）机制

在 Vue2 中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是 Vue 实例在项目中是单例的，捆绑工具（如 Webpack、Rollup）无法通过静态分析判断哪些方法被使用，因此不能有效进行 Tree-shaking

js

import Vue from 'vue'
Vue.nextTick(() => {})

而 vue3 的每个功能都是独立模块，都是通过按需导入的方式使用的，因此可以进行 Tree-shaking。

在 js 中，import 导入和 require 的写法有什么区别？

执行时机：

require 运行时动态加载，代码执行到时才加载。具有动态特性，可以在代码任意位置使用
import 编译时静态加载，在代码执行前结束。必须放在模块顶部，不能在条件语句中使用