Tree-shaking【前端优化】

什么是 Tree-shaking？

==Tree-shaking 是一种 消除 JavaScript 中未使用代码（dead code elimination, DCE） 的优化技术。==也就是像“摇树”一样，把没挂住的、用不到的叶子摇掉 → 最终的打包产物只包含你实际用到的代码。做到减少打包体积、提升加载速度。

Tree-shaking 有什么作用？

• 减小 bundle 体积：去掉无用的函数、变量、模块。
• 提升运行性能：浏览器少加载、少执行。
• 提升代码质量：迫使开发者写出更模块化的代码（ESM 友好）。

Tree-shaking 原理

Tree-shaking 主要基于 ES Module (ESM) 的静态分析特性：

• import / export 在编译阶段就能确定依赖关系（静态结构）。
• 构建工具（Webpack, Rollup, Vite, esbuild）会分析哪些导入实际被使用。
• 没有被用到的代码会在打包时删除。

⚠️ 注意：CommonJS (require/exports) 是 动态的，Tree-shaking 难以处理，所以 ESM 更适合。

使用示例

模块代码

// utils.ts
export function add(a: number, b: number) { return a + b }
export function sub(a: number, b: number) { return a - b }

// main.ts
import { add } from './utils'

console.log(add(1, 2))

➡️ 打包后只会包含 add，而 sub 会被 摇掉。

在构建工具里的应用

• Webpack：
  • 必须使用 ESM 语法 (import/export)。
  • 开启 mode: “production” 时自动启用。

// webpack.config.js
module.exports = {
  mode: "production",
  optimization: {
    usedExports: true, // 标记哪些导出被使用
    minimize: true     // 配合 Terser 压缩未使用代码
  }
}

• Rollup：
  • Rollup 天然支持 Tree-shaking（比 Webpack 更彻底）。

rollup -c

• Vite：
  • 底层用的是 esbuild + Rollup，天然支持 Tree-shaking。

Tree-shaking 的局限性

• 必须是 ESM 模块（import/export），不能用 require。【二者的区别】
• 动态引入/导出（比如 export * from … 或 require(variable)）不容易摇掉。
• 副作用代码 (side effects) 不会被删除。比如：

import './polyfill.js'  // 即使没用，也可能执行全局修改

👉 需要在 package.json 标记 “sideEffects”: false 或指定哪些文件有副作用。