打包优化：Tree Shaking原理与实践

Tree Shaking 是一种通过移除未使用代码来减小打包体积的优化技术，依赖 ES6 模块的静态结构，在 Webpack、Vite 等工具中实现；需使用 import/export 语法、避免副作用并配置 sideEffects 字段，结合生产模式与构建分析验证效果。

Tree Shaking 并不是某种具体的工具，而是一种优化技术的概念，它的核心目标是“移除 JavaScript 中未使用的代码”，从而减小打包体积。这个术语最早由 Rollup 团队提出，如今在 Webpack、Vite 等现代构建工具中广泛支持。理解其原理并正确实践，对前端性能优化至关重要。

Tree Shaking 是如何工作的？

Tree Shaking 的实现依赖于 ES6 模块系统（import / export）的静态结构。与 CommonJS 的动态引入不同，ES6 模块在编译时就能确定导入导出关系，这让构建工具可以在打包前分析哪些函数或变量从未被使用。

基本流程如下：

• 构建工具扫描所有模块，建立模块间的依赖图
• 从入口文件开始，标记所有被实际引用的导出
• 未被标记的导出被视为“死代码”
• 压缩工具（如 Terser）在生产环境下将其删除

确保你的代码支持 Tree Shaking

即使构建工具支持 Tree Shaking，如果代码写法不当，也无法生效。以下是关键实践建议：

• 使用 ES6 模块语法（import/export），避免 require
• 避免给模块添加副作用（side effect），比如在模块顶层执行修改全局变量的操作
• 在 package.json 中明确声明 "sideEffects: false"，帮助构建工具判断哪些文件可安全剔除

例如，一个仅提供工具函数的工具库：

export function add(a, b) {
  return a + b;
}
<p>export function subtract(a, b) {
return a - b;
}

若项目中只用了 add，那么 subtract 在打包时将被摇掉。

配置构建工具以启用 Tree Shaking

以 Webpack 为例，需满足以下条件：

苏打办公

360旗下的办公工具导航，优质海量工具

21

查看详情

• 使用 mode: 'production'，开启自动压缩和 Tree Shaking
• 确保 babel 转译时保留 ES6 模块语法（设置 { modules: false }）
• 在 package.json 中合理配置 sideEffects 字段

示例配置片段：

module.exports = {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { modules: false }]]
          }
        }
      }
    ]
  }
};

同时，在 package.json 中：

"sideEffects": false

如果你的包包含 CSS 引入或有特定副作用文件，可以写成：

"sideEffects": ["./src/polyfill.js", "*.css"]

验证 Tree Shaking 是否生效

可以通过生成 bundle 分析报告来确认。使用 webpack-bundle-analyzer 或 Vite 的 build --report 选项，查看最终打包结果中是否包含未使用的模块。

另一个简单方法是：在代码中定义一个未被调用的函数，然后检查打包后的文件是否还存在该函数。如果不存在，说明 Tree Shaking 成功。

基本上就这些。Tree Shaking 虽然自动程度高，但依赖正确的模块语法和配置。只要保持代码模块化、使用 ES6 语法、合理声明 sideEffects，就能有效减少生产包体积，提升加载性能。

以上就是打包优化：Tree Shaking原理与实践的详细内容，更多请关注php中文网其它相关文章！