二、Tree Shaking 工作原理
Tree Shaking 的实现依赖于 JavaScript 模块系统的静态特性，特别是 ES6 模块（ESM）的静态导入导出。
2.1 ES6 模块与 CommonJS 的区别
// CommonJS - 动态导入，难以静态分析
const utils = require('./utils');
if (condition) {
const module = require('./dynamic-module');
}
// ES6 模块 - 静态导入，可在编译时分析
import { sum, multiply } from './utils';
CommonJS 使用动态导入，运行时才确定依赖关系，难以进行静态分析。而 ES6 模块的导入导出是静态的，可以在编译阶段确定哪些代码被使用。
2.2 Webpack 5 的 Tree Shaking 机制
Webpack 5 对 Tree Shaking 进行了重大改进，提供了更强大的代码消除能力：
// webpack.config.js
module.exports = {
mode: 'production',
optimization: {
usedExports: true,
sideEffects: true,
minimize: true
}
};
关键配置项：
usedExports：标记被使用的导出sideEffects：识别无副作用的文件minimize：压缩时删除未使用代码
三、基础使用与配置
让我们从一个简单的示例开始，演示 Tree Shaking 的基础配置和效果。
3.1 项目结构
project/
├── src/
│ ├── utils.js
│ └── main.js
└── webpack.config.js
3.2 utils.js - 工具函数模块
// src/utils.js
export function add(a, b) {
console.log('执行 add 函数');
return a + b;
}
export function subtract(a, b) {
console.log('执行 subtract 函数');
return a - b;
}
export function multiply(a, b) {
console.log('执行 multiply 函数');
return a * b;
}
export function divide(a, b) {
console.log('执行 divide 函数');
return a / b;
}
3.3 main.js - 入口文件
// src/main.js
import { add, multiply } from './utils';
console.log(add(1, 2));
console.log(multiply(3, 4));
在这个示例中，我们只使用了 add 和 multiply，subtract 和 divide 没有被使用，应该被 Tree Shaking 掉。
3.4 基础 Webpack 配置
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'production',
optimization: {
usedExports: true,
minimize: true
}
};
3.5 package.json 的 sideEffects 标记
{
"name": "tree-shaking-demo",
"version": "1.0.0",
"sideEffects": false
}
标记 sideEffects: false 告诉 Webpack 这个模块没有副作用，可以安全地 Tree Shaking。
四、深入理解 Side Effects
Side Effects（副作用）是 Tree Shaking 中的关键概念，理解它对于正确配置至关重要。
4.1 什么是副作用
副作用是指模块执行时会产生外部影响的代码，如：
// 有副作用的模块
console.log('这个模块被加载了');
// 修改全局变量
window.globalConfig = { enabled: true };
// 立即执行的代码
(function() {
document.body.style.backgroundColor = 'red';
})();
// 给 Array 原型添加方法
Array.prototype.newMethod = function() {};
这些代码即使没有被导入使用，也会产生影响，因此不能被 Tree Shaking 掉。
4.2 sideEffects 配置详解
package.json 中的 sideEffects 配置有几种形式：
{
// 所有文件都没有副作用，可安全 Tree Shaking
"sideEffects": false,
// 列出有副作用的文件，其他可 Tree Shaking
"sideEffects": [
"*.css",
"*.scss",
"./src/polyfills.js"
],
// 所有文件都有副作用，不进行 Tree Shaking
"sideEffects": true
}
4.3 webpack.config.js 中的 sideEffects
module.exports = {
optimization: {
sideEffects: true, // 根据 package.json 的 sideEffects 配置
}
};
或者在 module.rules 中为特定文件设置：
module.exports = {
module: {
rules: [
{
test: /\.css$/,
sideEffects: true // CSS 有副作用，不要 Tree Shaking
}
]
}
};
五、高级配置与优化策略
5.1 usedExports 配置
module.exports = {
optimization: {
usedExports: true, // 标记被使用的导出
}
};
开启 usedExports 后，Webpack 会：
- 分析每个模块的导出哪些被使用
- 在生成的代码中标记未使用的导出
- 配合压缩工具（如 Terser）删除未使用的代码
5.2 concatenateModules 模块合并
module.exports = {
optimization: {
concatenateModules: true, // 模块合并，提升性能
}
};
concatenateModules（模块连接）可以将多个模块合并到一个闭包中，减少函数调用开销，并进一步优化 Tree Shaking。
5.3 innerGraph 内部图分析
module.exports = {
optimization: {
innerGraph: true, // 分析函数内部使用的导出
}
};
Webpack 5 的 innerGraph 功能可以分析函数内部对导出的使用情况，实现更细粒度的 Tree Shaking。
5.4 providedExports 与 usedExports 配合
module.exports = {
optimization: {
providedExports: true, // 提供导出信息
usedExports: true, // 使用导出信息
}
};
六、Tree Shaking 实战演练
让我们通过几个实际案例，深入掌握 Tree Shaking 的优化技巧。
6.1 案例一：库的 Tree Shaking
假设我们有一个工具库 math-lib：
// math-lib/index.js
export { add, subtract } from './operations';
export { circle, square } from './shapes';
// math-lib/operations.js
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }
// math-lib/shapes.js
export function circle(radius) { return Math.PI * radius * radius; }
export function square(side) { return side * side; }
只使用其中部分功能：
import { add, circle } from 'math-lib';
console.log(add(1, 2));
console.log(circle(5));
配置库的 package.json：
{
"name": "math-lib",
"module": "dist/esm/index.js",
"sideEffects": false
}
6.2 案例二：CSS 模块的处理
CSS 文件有副作用，不能被 Tree Shaking，需要特殊处理：
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
sideEffects: true, // 标记有副作用
use: ['style-loader', 'css-loader']
}
]
}
};
6.3 案例三：第三方库的优化
对于第三方库，我们需要查看它的 package.json 是否正确标记了 sideEffects：
// lodash-es 的 package.json 示例
{
"sideEffects": false,
"module": "lodash.js"
}
优化导入方式：
// 不推荐：导入整个库
import _ from 'lodash-es';
// 推荐：按需导入
import { debounce, throttle } from 'lodash-es';
七、深入理解 Tree Shaking 的内部机制
7.1 静态分析与模块依赖图
Webpack 在构建时会建立模块依赖图，通过静态分析每个模块的导入导出，确定哪些代码被实际使用。
// Webpack 内部的静态分析（简化示意）
function analyzeModule(module) {
const usedExports = new Set();
const exports = getExports(module);
for (const importer of module.importers) {
const importedNames = getImportedNames(importer, module);
importedNames.forEach(name => usedExports.add(name));
}
return usedExports;
}
7.2 Terser 的代码压缩与消除
Tree Shaking 的最终完成依赖于压缩工具 Terser。Webpack 标记未使用的代码后，Terser 在压缩阶段将其删除。
// Terser 配置（webpack 内置）
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
unused: true, // 删除未使用的变量
dead_code: true, // 删除不可达代码
},
},
}),
],
}
7.3 Module Concatenation 的工作原理
Module Concatenation（模块连接）是 Webpack 3 引入的优化，在 Webpack 5 中进一步增强。它将多个模块合并到一个函数闭包中，减少运行时开销。
// 合并前
__webpack_require__('./src/utils.js');
__webpack_require__('./src/main.js');
// 合并后
(function(modules) {
// 所有模块的代码都在这里
// 减少函数调用和包装开销
})();
7.4 Inner Graph 的精细分析
Webpack 5 的 Inner Graph 功能可以分析函数内部对导入的使用情况，实现更细粒度的 Tree Shaking。
// 假设有这样的代码
import { A, B } from './module';
function useA() {
console.log(A);
}
export function onlyUseA() {
useA(); // 只用到 A，B 可以被 Tree Shaking
}
Inner Graph 可以追踪到 onlyUseA 只用到了 A，B 可以被安全删除。
八、Tree Shaking 的常见问题与解决方案
8.1 问题一：副作用识别错误
有时 Webpack 可能错误地认为某个模块有副作用，导致无法正确 Tree Shaking。
// 问题：导入但未使用的模块没有被删除
import './unused-module'; // 这个模块可能被认为有副作用
解决方案：精确标记 sideEffects
{
"sideEffects": [
"./src/polyfills.js",
"*.css"
]
}
8.2 问题二：Babel 转译影响 Tree Shaking
Babel 将 ES6 模块转译为 CommonJS 后，会破坏 Tree Shaking 能力。
// Babel 转译后的代码（CommonJS）
var _utils = require('./utils');
解决方案：保留 ES6 模块语法
{
"presets": [
["@babel/preset-env", {
"modules": false // 不转译 ES6 模块
}]
]
}
8.3 问题三：动态导入限制
// 动态导入难以静态分析
const module = import(`./${name}`);
解决方案：减少动态导入的使用，或者使用 magic comments 提供提示：
import(/* webpackInclude: /\.json$/ */ `./${name}`);
8.4 问题四：TypeScript 编译配置
TypeScript 的编译配置可能影响 Tree Shaking。
{
"compilerOptions": {
"module": "ESNext", // 使用 ES 模块
"target": "ESNext",
"moduleResolution": "Node"
}
}
九、性能优化策略与最佳实践
9.1 项目配置检查清单
确保你的项目配置正确支持 Tree Shaking：
// webpack.config.js
module.exports = {
mode: 'production',
optimization: {
usedExports: true,
concatenateModules: true,
minimize: true,
innerGraph: true
}
};
9.2 package.json 配置优化
{
"module": "dist/esm/index.js",
"sideEffects": false,
"exports": {
".": {
"import": "./dist/esm/index.js",
"require": "./dist/cjs/index.js"
}
}
}
9.3 代码编写最佳实践
- 使用 ES6 模块语法（import/export）
- 避免副作用，或者精确标记
- 按需导入，避免全量导入
- 使用纯函数，减少全局状态
- 避免在模块顶层执行副作用代码
// 推荐：纯函数模块
export function pureFunction(x) {
return x * 2;
}
// 不推荐：有副作用的模块
let globalState = {};
export function modifyState() {
globalState.modified = true;
}
9.4 库的发布优化
如果你开发的是一个库，确保正确配置以支持使用者的 Tree Shaking：
{
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"sideEffects": false,
"exports": {
".": {
"import": "./dist/esm/index.js",
"require": "./dist/cjs/index.js"
}
}
}
十、实战案例与性能对比
10.1 案例：React 组件库的 Tree Shaking
假设有一个 React 组件库：
// components/Button.js
export const Button = ({ children }) => <button>{children}</button>;
// components/Input.js
export const Input = ({ value }) => <input value={value} />;
// components/Modal.js
export const Modal = ({ isOpen }) => isOpen && <div>Modal</div>;
// index.js
export { Button } from './Button';
export { Input } from './Input';
export { Modal } from './Modal';
只使用 Button 的应用：
import { Button } from 'my-ui-lib';
正确配置后，Input 和 Modal 应该被 Tree Shaking 掉。
10.2 性能对比测试
创建测试项目，对比开启和关闭 Tree Shaking 的效果：
// 生成测试文件
function generateLargeModule() {
let code = '';
for (let i = 0; i < 100; i++) {
code += `export function func${i}() { return ${i}; }\n`;
}
return code;
}
测试结果示例：
| 配置 | 打包前 | Tree Shaking 后 | 减少 |
|---|---|---|---|
| 无优化 | 50KB | 50KB | 0% |
| usedExports | 50KB | 45KB | 10% |
| usedExports + sideEffects | 50KB | 25KB | 50% |
| 完整优化 | 50KB | 20KB | 60% |
10.3 Bundle Analyzer 分析工具
使用 webpack-bundle-analyzer 可视化打包结果：
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
};
通过分析器可以直观地看到哪些模块没有被 Tree Shaking。
十一、未来发展与 Webpack 新特性
11.1 Webpack 5 的改进
Webpack 5 在 Tree Shaking 方面有重大改进：
- 更好的静态分析
- Inner Graph 功能
- 更强大的 sideEffects 处理
- 模块连接优化
- 与 Terser 的更紧密集成
11.2 ES2022+ 的新特性影响
新的 JavaScript 特性可能为 Tree Shaking 带来更多可能性：
// ES2022+ 的潜在优化方向
import { featureA, featureB } from 'module' with { treeShakeable: true };
11.3 构建工具的演进
新一代构建工具如 Vite、Rollup 等也在 Tree Shaking 方面进行了创新：
// Rollup 的 Tree Shaking 配置
export default {
treeshake: {
moduleSideEffects: false,
propertyReadSideEffects: false,
tryCatchDeoptimization: false
}
};
