webpack tree shaking 摇树原理

 tree-shaking 就是清除冗余代码，把大树上的叶子摇下来，搞得这么高深！

Tree-shaking 是指在打包过程中通过静态分析，识别并删除未使用的代码，以减小最终输出文件的大小。

Webpack 通过内置的 UglifyJS 插件或者 Terser (/ˈtersər/ 特饿 ser）插件来实现 Tree-shaking。

1. 标记未使用的代码： 在编译过程中，Webpack 会通过静态分析模块之间的依赖关系，识别出哪些代码是未使用的。

2. 基于 ES6 模块系统： Tree-shaking 的原理建立在 ES6 模块系统的基础之上。ES6 模块系统的静态性质，使得编译器可以在不运行代码的情况下分析模块的依赖关系，也就能确定哪些模块没有被引用而删除对应代码。也就是es6 的 import 语法。

   1. commonjs 是动态语法，无法确定在实际运行中是否需要某些模块，所以 cj 不适合tree-shaking 机制。所以webpack 就没有针对cjs 的tree-shaking 优化。

   2. tree-shaking 只能在静态modules 下工作，es6模块加载时静态的。ES6模块的依赖关系在代码解析阶段就被确定了，而不是在代码执行过程中动态确定的。

3. 利用标记进行剪裁： 一旦标记出未使用的代码，Webpack 就会在打包的过程中将这些未使用的代码从最终输出的文件中剔除。

4. 依赖图谱： Webpack 使用依赖图（Dependency Graph）来跟踪模块之间的依赖关系。在这个图谱中，只有被引用到的代码才会被包含在最终的构建输出中。

5. SideEffects 标记： 为了确保不会错误地剪裁有副作用的代码，开发者可以在 package.json 【没错是package.json】文件中的 "sideEffects" 属性中声明哪些模块是有副作用的，这样 Webpack 将确保保留这些模块的代码。

总的来说，Tree-shaking 通过在打包过程中识别和删除未使用的代码，有效地减小了最终输出的文件大小，提高了前端应用的性能。然而，为了确保 Tree-shaking 的有效性，开发者需要注意编写模块化、纯粹的代码，并遵循 ES6 模块的静态性质。

tree-shaking 是文件级别的，不是函数级别的，因为他基于 esm