Tree Shaking（摇树优化）是前端打包工具（如 Webpack、Rollup）中的一种代码优化技术，它能移除项目中未被实际使用的代码，从而减小最终打包体积，提升应用加载性能。
一、Tree Shaking 的核心原理
Tree Shaking 基于 ES6 模块系统的静态特性实现：
- ES6 模块的静态分析 ：ES6 模块（
import/export）是编译时确定依赖关系的，而非运行时。打包工具能在构建阶段分析出模块的导入导出关系，识别出未被使用的代码。 - 死代码消除（Dead Code Elimination）：通过语法分析标记出 "未被引用" 的代码（死代码），最终在打包时将其剔除。
对比 CommonJS 模块（require）的动态特性（运行时加载），Tree Shaking 无法对其生效，这也是为什么 Tree Shaking 主要针对 ES6 模块。
二、Tree Shaking 的适用条件
- 使用 ES6 模块 ：代码必须基于
import/export，而非require。 - 启用模块解析 ：打包工具需配置为处理 ES6 模块（如 Webpack 中设置
mode: 'production'自动启用）。 - 无副作用代码：需明确标记 "无副作用" 的模块，避免工具误删必要代码（如修改全局变量的代码）。
三、在项目中的应用
1. Webpack 中的配置
Webpack 4+ 中，production 模式默认开启 Tree Shaking，核心配置：
javascript
运行
// webpack.config.js
module.exports = {
mode: 'production', // 生产模式自动启用 Tree Shaking
optimization: {
usedExports: true, // 标记未使用的导出
sideEffects: true // 识别 package.json 中的 sideEffects 字段
}
};2. 标记无副作用模块
在 package.json 中声明 "无副作用" 的文件或模块，帮助工具安全地剔除代码：
json
{
"sideEffects": [
"./src/styles/*.css", // CSS 文件有副作用（影响样式），需保留
"*.less"
]
}若模块完全无副作用，可设为 "sideEffects": false。
3. 代码编写规范
-
避免默认导出 ：默认导出（
export default）难以被 Tree Shaking 优化，优先使用命名导出（export const xxx）。javascript
运行
// 推荐：命名导出，便于 Tree Shaking export const utilA = () => {}; export const utilB = () => {}; // 不推荐：默认导出，无法单独剔除部分代码 export default { utilA, utilB }; -
避免副作用代码：如在模块中直接修改全局变量、操作 DOM 等，这类代码会被视为 "有副作用" 而无法被移除。
四、Tree Shaking 的局限性
- 动态导入场景 ：如
import(${path}/module.js)这类动态导入，工具无法静态分析，无法优化。 - 副作用代码：工具会保留可能有副作用的代码，即使未被引用。
- 库的兼容性：部分第三方库未遵循 ES6 模块规范，或包含大量副作用代码，Tree Shaking 效果有限（如 jQuery）。
五、实践案例：优化第三方库
以 Lodash 为例，直接导入整个库会包含大量未使用代码：
javascript
运行
// 未优化：导入整个 Lodash，体积大
import _ from 'lodash';
_.debounce(() => {}, 1000);优化方式：使用 Lodash 的 ES 模块版本，按需导入：
javascript
运行
// 优化：仅导入 debounce 方法，Tree Shaking 会剔除其他代码
import { debounce } from 'lodash-es';
debounce(() => {}, 1000);六、与其他优化手段结合
- 代码分割（Code Splitting）：将代码拆分为多个 chunk，配合 Tree Shaking 进一步减小单个文件体积。
- 压缩混淆：Tree Shaking 后，通过 Terser 等工具压缩代码（移除空格、重命名变量），最终优化体积。
总结
Tree Shaking 是前端性能优化的关键技术，核心依赖 ES6 模块的静态特性，通过剔除未使用代码减小打包体积。在项目中需遵循 ES6 模块规范、标记副作用代码，并结合打包工具配置，才能最大化发挥其优化效果。尤其在大型项目中，合理使用 Tree Shaking 可显著提升应用加载速度