解析 Tree Shaking 原理：干掉90%未使用的代码！

2025年6月21日 · 1344 字

随着前端项目日益复杂，模块化开发可能会导致大量未被使用的代码被打包进最终产物。而巨大的JavaScript文件就会导致用户需加载无用代码，解析/执行时间增加，最终导致首屏出现一定时间的延迟。

让我们来看一个简单的例子：

import _ from 'lodash';

button.addEventListener('click', _.debounce(handler, 300));

如果没有使用Tree Shaking来优化，整个lodash库（约70KB）将会全部被打包，而我们实际只需约1KB的debounce功能。当项目中有很多库都是这种方式来导入的话，最终产物的体积就会激增。

什么是 Tree Shaking？

Tree Shaking 是基于ES6模块的静态分析技术，通过识别并移除未被使用的代码（Dead Code Elimination），实现精准的代码裁剪。顾名思义，可以想象为摇动代码树，让枯叶（无用代码）落下，从而精简代码树。Tree Shaking最初由 Rollup推广开来，现在 Webpack、Parcel 等主流打包工具都已支持Tree Shaking。

Tree Shaking 的原理

Tree Shaking的实现过程可细分为几个关键步骤：

1. 模块依赖图构建（Dependency Graph）

打包工具（Webpack/Rollup）从入口文件开始，静态分析所有 ES6 模块的导入/导出关系，构建模块依赖图

以这两个模块为例：

// src/index.js 
import { add } from './math.js';

// src/math.js
export const add = (a, b) => a + b;       // ✅ 被引用
export const subtract = (a, b) => a - b;  // ❌ 未被引用

构建的依赖图：

        Entry (index.js)
          │
          └──▶ math.js
               ├─ add (被引用)
               └─ subtract (孤立节点)

2. 可达性分析（Reachability Analysis）

基于图论算法（如DFS）标记所有从入口可达的代码：

  1. 从入口开始遍历依赖图
  2. 标记所有被导入且被使用的导出
  3. 未被遍历到的节点视为"死代码"
// 分析结果
Live Exports: [add]
Dead Exports: [subtract]

3. 抽象语法树分析（AST Parsing）

使用工具（如Webpack使用acorn）将代码转换为AST进行精确分析：

原始代码AST：

// math.js AST 简化表示
Program
  ExportNamedDeclaration
    FunctionDeclaration: add
    FunctionDeclaration: subtract

引用关系分析：

// index.js AST 简化表示
ImportDeclaration
  specifiers:
    ImportSpecifier: add
CallExpression
  callee: add

4. 副作用标记（Side Effect Detection）

识别具有副作用的代码

// 有副作用的代码（会被保留）
export const utils = {
  init() {
    console.log('Initialized!');// 副作用操作
  }
};

// 无副作用的纯函数（可安全移除）
export function square(x) {
  return x * x;
}

打包工具通过以下方式来识别副作用：

  • 自动静态分析
  • **package.json中的sideEffects**标记
  • /*#__PURE__*/ 注释

5. 代码消除（Code Elimination）

在依赖图构建和标记完成之后，结合压缩工具（如Terser）来移除死代码：

消除前：

/* harmony export */ __webpack_exports__["add"] = add;
/* unused harmony export subtract */
function add(a, b) { return a + b; }
function subtract(a, b) { return a - b; }

消除后：

function add(a, b) { return a + b; }
// subtract 函数被完全移除

为什么是基于ES6 模块，CommonJS不行吗？

CommonJS 的 require() 是动态的，可以在代码的任意位置调用，而且还支持条件导入。module.exports 也可以在运行的时候进行修改。CommonJS 的动态性使得打包工具在编译的时候难以分析出哪些代码是被使用的，哪些代码是需要移除的。 而 ES6 模块的静态特性，使得打包工具可以安全地进行分析和移除未使用代码。

// CommonJS 动态引入无法静态分析
const utils = require(condition ? 'utilsA' : 'utilsB'); 

// ES6 的静态结构保证可分析性
import { specificFunc } from 'utils'; // 依赖关系明确

如何有效利用 Tree Shaking?

项目配置最佳实践

Webpack 配置示例（vite默认开启了tree-shaking）：

需要注意Webpack 通常只在生产模式下才会启用完整的 Tree Shaking

// webpack.config.js
module.exports = {
  mode: 'production', // 生产模式自动启用Terser
  optimization: {
    usedExports: true, // 标记未使用代码
    minimize: true,    // 启用代码压缩
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { modules: false }]] // 保留ES6模块
          }
        }
      }
    ]
  }
};

package.json 配置：

{
  "sideEffects": [
    "*.css",        // 标记CSS文件有副作用
    "src/polyfill.js" // 特殊文件需保留
  ]
}

编码规范

避免副作用代码：

// 反例：立即执行副作用（影响Tree Shaking）
export const utils = {
  method() {/*...*/ }
};

// 全局副作用操作
window.utils = utils;

// 正例：纯功能模块
export function method1() {/*...*/ }
export function method2() {/*...*/ }

按需引入第三方库：

// 反例：全量引入
import _ from 'lodash';

// 正例：按需引入
import debounce from 'lodash/debounce';
// 或使用babel-plugin-import
import { Debounce } from 'lodash';

检查打包结果

可以使用webpack-bundle-analyzer 来可视化输出的最终产物，确认Tree Shaking正常开启，并且根据输出结果找出可以优化的部分

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer');

plugins: [
  new BundleAnalyzerPlugin()
]

关于Tree Shaking的常见问题

问题1： 第三方库无法Tree Shaking

方案：

  1. 检查库是否提供ES模块版本（查看package.json的**module**字段）
  2. 使用支持ESM的替代库（如用**date-fns替代moment**）

问题2： Babel默认转译会破坏ES模块

方案： 配置Babel保留模块语法

// .babelrc
{
  "presets": [["@babel/preset-env", { "modules": false }]]
}

结语

Tree Shaking 通过精准消除无用代码，可以干掉90%未使用的代码。结合HTTP/2、代码分割等优化手段，能显著提升应用性能。掌握其原理并正确配置工具链，是我们现代化前端工程的必备技能。