webpack tree shaking 摇树原理

Tree-shaking 是指在打包过程中通过静态分析，识别并删除未使用的代码，以减小最终输出文件的大小。Webpack 通过内置的 UglifyJS 插件或者 Terser 插件来实现 Tree-shaking。下面是简要的 webpack Tree-shaking 的原理：

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

2. 基于 ES6 模块系统： Tree-shaking 的原理建立在 ES6 模块系统的基础之上。ES6 模块系统的静态性质使得编译器可以在不运行代码的情况下分析模块的依赖关系。

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

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

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

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