JavaScriptTreeShaking原理与应用详解

Tree shaking 是现代前端构建中至关重要的代码瘦身技术——它并非 JavaScript 语言特性，而是 Webpack、Vite、Rollup 等打包工具在 production 模式下，基于 ES 模块静态结构进行的智能“剪枝”：只保留真正被 import 并使用的导出代码，彻底剔除死代码；但它的生效极度依赖三大前提：项目启用 ES 模块（如 package.json 中 type: "module"）、使用规范的具名/默认导出（而非对象字面量 default 导出）、以及第三方库本身提供 ESM 兼容版本（如 lodash-es 或 lodash/debounce 路径导入），否则即使写了解构语法也无法触发优化；更需警惕隐式副作用——未声明 sideEffects 的模块，哪怕没被引用，也会因潜在运行时影响而被完整保留。真正阻碍 tree shaking 的，往往不是配置缺失，而是模块设计、包格式与构建认知之间的微妙断层。

Tree shaking 本身不是 JavaScript 语言特性，而是现代打包工具（如 Webpack、Vite、Rollup）在构建时做的静态分析优化——它只保留你实际 import 并使用的代码，删掉没被引用的导出（export）。 它对 ES 模块（import/export）有效，对 require 或 CommonJS 无效。

为什么 import { debounce } from 'lodash' 还是引入了整个 lodash？

因为多数 npm 包（如 lodash）默认导出的是 CommonJS 格式，即使你写的是 ES import，打包工具也无法安全地做静态分析。而且 lodash 的主入口（node_modules/lodash/index.js）本身是动态拼接模块的，没有明确的 export 声明。

• ✅ 正确做法：用支持 ES 模块的子包，比如 import debounce from 'lodash/debounce'（注意路径，不是从根导入）
• ✅ 或换用原生支持 ESM 的库，如 lodash-es：import { debounce } from 'lodash-es'
• ❌ 错误假设：“只要写了 {} 解构，tree shaking 就自动生效”——前提是模块本身导出方式可被静态分析

Webpack 中开启 tree shaking 需要哪些配置？

Webpack 5+ 默认启用 tree shaking，但有三个关键前提必须满足：

• "type": "module" 在项目 package.json 中（或所有源文件用 .mjs 后缀），确保 Webpack 把你的代码当 ES 模块处理
• mode: 'production' —— development 模式下不会删除未使用代码（为调试保留）
• 导出必须是 export const foo = ... 或 export function bar() {...} 等具名/默认导出，不能是 export default { foo, bar } 这种对象字面量导出（它不可被静态判定哪些属性被用了）

如果你写了 export default { init: () => {}, destroy: () => {} }，即使只调用 instance.init()，整个对象仍会被保留。

Vite 或 Rollup 为什么 tree shaking 更“狠”？

它们原生基于 ES 模块设计，解析和剪枝更激进。例如：

export const a = 1
export const b = 2
export default function main() { return a + b }

若只 import main from './math.js'，Vite 会保留 main 和它直接依赖的 a、b；但如果 main 内部没用到 b，而你又没显式 import b，那 b 就会被摇掉。

• ⚠️ 注意副作用：如果某模块有顶层执行逻辑（如 console.log('init')），且你没声明 "sideEffects": false 或对应模式，打包工具不敢删它——哪怕没被 import
• 在 package.json 中加 "sideEffects": ["*.css"] 表示只有 CSS 文件有副作用，其余 JS 全可安全 shake

真正卡住 tree shaking 的，往往不是配置开关，而是模块导出形式、第三方包格式、以及你是否无意中触发了副作用（比如 import 一个只用来注册全局插件的模块，却没告诉打包器“它没副作用”）。

到这里，我们也就讲完了《JavaScriptTreeShaking原理与应用详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！