Tree Shaking是如何实现JavaScript代码压缩优化的

Tree Shaking是一种基于ES6模块语法的JavaScript代码压缩优化技术，核心目标是剔除项目中没有被实际引用到的代码，也就是常说的死代码，从而减少最终打包文件的大小，提升应用的加载和运行效率。

Tree Shaking的核心前提

Tree Shaking能够生效的基础是ES6模块系统的静态特性，和CommonJS模块不同，ES6模块的导入导出具有以下特点：

• 模块的导入导出语句必须位于模块的顶层作用域，不能在函数、条件判断等动态逻辑中声明
• 导入的模块路径是静态字符串，不支持动态拼接的路径
• 导入的模块内容是静态可分析的，在编译阶段就能确定模块的依赖关系和导出内容

正是因为ES6模块的这些特性，构建工具才能在代码编译阶段就分析出哪些导出内容被引用，哪些没有被引用，这是Tree Shaking能够工作的核心前提。如果使用CommonJS的require和module.exports，由于导入导出是动态执行的，构建工具无法静态分析依赖关系，Tree Shaking就无法生效。

Tree Shaking的完整工作流程

Tree Shaking的实现通常分为三个阶段，分别是依赖收集与分析、标记未使用代码、移除死代码。

1. 依赖收集与静态分析

构建工具在解析项目代码时，会先遍历所有的ES6模块，收集每个模块的导入导出信息。比如下面这段代码：

// utils.js 导出模块
export const add = (a, b) => a + b;
export const minus = (a, b) => a - b;
export const multiply = (a, b) => a * b;

// main.js 导入模块
import { add, minus } from './utils.js';
console.log(add(1, 2));
console.log(minus(3, 1));

构建工具会解析到utils.js导出了三个方法，而main.js只导入了add和minus两个方法，multiply没有被任何模块导入。

2. 标记未使用导出

完成依赖收集后，构建工具会标记所有没有被其他模块引用的导出内容。上面的例子中，multiply方法没有被任何导入语句引用，就会被标记为未使用的导出。这个阶段只是做标记，不会直接删除代码，通常构建工具会生成对应的依赖图谱，记录每个导出是否被引用。

3. 压缩阶段移除死代码

在代码压缩阶段，构建工具会结合之前的标记信息，将未被使用的导出代码直接移除。比如上面的utils.js经过Tree Shaking处理后，multiply方法会被删除，最终打包产物中只会保留add和minus两个方法，以及对应的调用逻辑。

Tree Shaking的生效条件

要让Tree Shaking正常工作，需要满足以下几个条件：

• 项目中使用ES6的import和export语法，避免使用CommonJS的require和module.exports
• 在package.json中正确配置sideEffects字段，标记项目中的文件是否有副作用，避免误删有副作用的代码
• 构建工具的压缩配置需要开启对应的死代码消除选项，比如Webpack中需要开启usedExports和minimize配置

sideEffects字段的作用

如果项目中有一些文件虽然没有被直接导入，但是执行后会产生副作用，比如全局样式文件、修改全局对象的文件，就需要在package.json中配置sideEffects：

{
  "name": "my-project",
  "sideEffects": [
    "*.css",
    "./src/polyfill.js"
  ]
}

这样构建工具在处理这些文件时，即使没有被其他模块导入，也不会将其标记为未使用代码，避免误删导致功能异常。

Tree Shaking的局限性

虽然Tree Shaking能有效减少代码体积，但它也有一定的局限性：

• 只能处理ES6模块，对于CommonJS模块、AMD模块等动态模块无法生效
• 如果导出的是一个对象，即使对象中的某个属性没有被使用，Tree Shaking也无法单独移除该属性，因为对象的属性访问是动态的，无法在编译阶段确定是否被使用
• 对于有副作用的代码，如果sideEffects配置不正确，可能会导致误删或者无法正确移除死代码

简单示例验证Tree Shaking效果

我们可以通过一个简单的Webpack配置来验证Tree Shaking的效果，首先准备两个文件：

// src/math.js
export const square = (x) => x * x;
export const cube = (x) => x * x * x;

// src/index.js
import { square } from './math.js';
console.log(square(2));

然后配置Webpack，开启usedExports和minimize：

// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'production', // production模式默认开启压缩
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    usedExports: true, // 标记未被使用的导出
    minimize: true // 开启压缩，移除死代码
  }
};

打包后查看dist/bundle.js，会发现cube方法没有被包含在最终的产物中，说明Tree Shaking生效了。

Tree Shaking本质是静态分析加死代码消除的组合技术，合理利用可以大幅减小打包体积，是前端性能优化中非常重要的一个环节。

Tree_ShakingJavaScript压缩ES6模块代码优化死代码消除修改时间：2026-06-13 06:12:32