webpack 的 Tree Shaking 实现机制

webpack 的 Tree Shaking 实现机制

1. 核心原理

Tree Shaking 直译为“摇树优化”，指的是移除代码中未被引用的部分，从而减小打包输出体积。其基本原理是依赖ES Module（ESM）静态结构，通过静态分析导入导出（import/export），找出哪些代码未被用到，然后在打包时丢弃这些“死代码”。

2. 具体实现流程

1. 静态分析
   webpack 在解析源码时，会分析 ES Module 的 import/export，建立依赖图。
2. 标记 Side-Effect-Free 代码
   通过配置 package.json 的 sideEffects 字段告知哪些文件/模块没有副作用，可以安全删除未被用到的导出。
3. 标记未使用的导出
   只要发现某个导出的变量/函数/类没有被用到（没有被任何地方 import），就会被标记为“可移除”。
4. 代码压缩移除
   生产环境下，webpack 调用 Terser（或 Uglify）进行代码压缩时，会把这些无用的代码摇掉（dead code elimination）。

3. 关键条件

• 必须使用 ES Module（import/export）
  CommonJS（require/module.exports）无法静态分析，tree shaking 无法生效。
• sideEffects 字段正确设置
  "sideEffects": false 表示整个包没有副作用；有副作用的文件需单独列出。
• 生产模式压缩
  只有在 production 模式下，Terser 才会真正移除未用代码。

4. 常见影响 tree shaking 的问题

• 引入方式用了 require/动态 import，分析不了
• sideEffects 字段没配好，导致 tree shaking 失效或误删
• 依赖包本身不是 ESM 导出
• 被引用的代码实际没用到，但 import 语句还在（比如 import ‘./a.css’）

5. 代码示例

// a.js
export function used() { console.log('used'); }
export function unused() { console.log('unused'); }

// b.js
import { used } from './a';
used();

打包后，unused 函数会被摇掉，不会出现在最终代码中。

6. 配置简要

// package.json
{
  "sideEffects": false
}

// webpack.config.js
module.exports = {
  mode: 'production',
  // ...
}

7. 辅助工具

• webpack-bundle-analyzer：可视化查看哪些代码被打包进产物

总结：
webpack 的 tree shaking 本质依赖于 ES Module 静态分析、sideEffects 配置和生产模式下的压缩插件，可高效移除未用代码，减少产物体积。设置/使用不当会导致 tree shaking 失效，是前端构建优化中必须关注的知识点。