webpack 之 Tree-shaking

Tree-shaking 是 Webpack 等现代构建工具中用于消除未使用代码（dead code）的技术，其核心目标是在打包时只保留被实际引用的代码，从而减小 bundle 体积。下面从实现原理、前提条件、配置方法和注意事项四个方面详细说明：

一、Tree-shaking 的实现原理

Tree-shaking 基于 ES6 模块的静态结构特性（即模块依赖关系在编译时确定，不依赖运行时），主要通过以下步骤实现：

静态分析：Webpack 解析模块时，通过 AST（抽象语法树）分析哪些导出被其他模块实际引用。例如：
javascript 复制代码
```
// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add } from './utils.js'; // 只引用了 add
```
Webpack 会识别到 subtract 未被引用。
标记未使用导出：分析后，未被引用的导出会被标记为 "dead code"。
压缩阶段移除：在压缩代码（如使用 Terser 插件）时，这些标记的代码会被彻底删除。

二、Tree-shaking 的前提条件

使用 ES6 模块语法 ：Tree-shaking 依赖静态导入/导出（import/export），CommonJS（require/module.exports）不支持，因为其依赖关系是动态的。
代码必须是无副作用的：如果某个导出函数或模块有副作用（如修改全局变量、发起 API 请求），Webpack 无法安全删除它。例如：
javascript 复制代码
```
// 有副作用的代码（不会被 Tree-shaking）
export const init = () => {
  localStorage.setItem('init', 'true'); // 副作用：修改存储
};
```
启用生产模式：Webpack 的生产模式默认开启 Tree-shaking 和代码压缩。

三、Webpack 配置 Tree-shaking

1. 基础配置（生产模式）

javascript 复制代码

// webpack.config.js
module.exports = {
  mode: 'production', // 生产模式自动启用 Tree-shaking
  optimization: {
    usedExports: true, // 标记未使用的导出
    minimize: true,    // 压缩代码（默认使用 Terser）
  },
};

2. 排除副作用

通过 package.json 的 sideEffects 字段声明哪些文件有副作用：

json 复制代码

{
  "sideEffects": false, // 所有代码都无副作用
  "sideEffects": [      // 仅以下文件有副作用
    "./src/globals.css",
    "./src/init.js"
  ]
}

3. 使用 ESM 版本的库

确保引入的第三方库提供 ESM 版本。例如：

javascript 复制代码

// 推荐：使用 ESM 版本
import _ from 'lodash-es';

// 避免：CommonJS 版本可能无法 Tree-shaking
const _ = require('lodash');

四、Tree-shaking 的局限性与注意事项

动态导入的影响 ：import('./module.js').then(...) 形式的动态导入可能导致 Tree-shaking 失效。
第三方库的处理：部分库（如 Lodash）需要手动导入 ESM 子模块：
javascript 复制代码
```
// 仅导入需要的功能
import { debounce } from 'lodash-es/debounce';
```

Babel 配置冲突：Babel 默认会将 ES6 模块转换为 CommonJS，需禁用此行为：

javascript 复制代码

// babel.config.js
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false // 保留 ES6 模块语法
      }
    ]
  ]
}

调试 Tree-shaking 结果：
bash 复制代码
```
npx webpack --mode production --stats-json > stats.json
```
使用 Webpack Bundle Analyzer 分析生成的 stats.json，查看哪些代码被保留或删除。

总结

Tree-shaking 通过静态分析和压缩工具，帮助消除未使用的 ES6 模块代码，显著减小包体积。关键在于使用纯 ESM 代码、避免副作用，并合理配置 Webpack 和 Babel。