JavaScript Tree Shaking是什么？如何移除未使用代码？

Tree Shaking 是一种在构建阶段（而非运行时）利用 ES 模块静态结构自动剔除未被引用的导出代码的智能优化技术，它不依赖压缩混淆，而是通过分析 import/export 依赖图精准“摇掉”死代码，但其生效严格依赖具名导入、字面量导出、显式副作用声明（如 `sideEffects: false`）以及 Webpack/Rollup/Vite 等工具的正确生产配置——忽略模块格式、副作用标记或构建设置中的任一环，都可能导致优化失效；掌握这三大关键点，就能让 Tree Shaking 安静而高效地为你的应用瘦身。

Tree Shaking 是一种在构建时（如使用 Webpack、Rollup 或 Vite）自动识别并移除 JavaScript 中未被引用、未被使用的代码（dead code）的优化技术。它不是运行时行为，也不依赖于压缩工具（如 Terser）的变量名混淆或删除，而是基于 ES 模块（import/export）的静态结构，在编译阶段就“摇掉”那些确定不会执行的分支。

它依赖 ES 模块的静态可分析性

CommonJS（require）是动态加载、运行时决定依赖关系，无法在构建前确认哪些导出没被用到；而 ES 模块的 import 和 export 语句必须是顶层的、静态的——这意味着打包工具能不执行代码，仅靠语法分析就能画出完整的模块依赖图和引用链。

• 只有具名导入（import { foo } from './utils.js'）才可能触发 Tree Shaking；默认导入（import utils from './utils.js'）若模块没有 export default 的显式标记，或存在副作用，往往无法安全剔除
• 导出必须是字面量声明（export const a = 1、export function fn(){}），不能是动态赋值（export { something } 中的 something 若来自计算结果，会阻碍分析）
• 如果一个模块里有副作用（比如直接执行了 console.log、修改全局变量、绑定事件等），即使没被 import，也可能被保留——可通过 /*#__PURE__*/ 注释或 package.json 中的 "sideEffects": false 显式声明无副作用

它不是删函数，而是删“未被连接的导出”

Tree Shaking 不是简单地检测“某个函数有没有被调用”，而是看：这个 export 是否出现在任何一条从入口文件出发的、可到达的 import 路径上。只要没被任何活的引用链触达，整个导出声明（包括其内部逻辑）就可能被剔除。

• 例如：你写了 export const unusedHelper = () => {...}，但项目中没有任何地方 import { unusedHelper } 或 import * as x 后用到它 → 它大概率被摇掉
• 但如果你写了 export default () => {...}，又只用了 import xxx from './x' 却没调用 xxx，默认导出仍会被保留——因为 ES 模块规范要求默认导出必须执行（除非明确标记为 pure 或 sideEffects: false）
• 类、对象字面量、箭头函数本身不会被“自动内联”，Tree Shaking 关注的是导出绑定（binding）是否存活，而不是函数体是否冗余

实际生效需要构建工具+正确配置

即使代码符合 ES 模块规范，若构建配置不当，Tree Shaking 也会失效：

• Webpack 需要 mode: 'production'（开启 optimization.usedExports 和 concatenateModules）
• 确保 Babel 不把 import/export 编译成 require（禁用 @babel/preset-env 的 modules: 'commonjs'）
• 第三方库若用了 CommonJS 或未标注 sideEffects，它的全部代码都可能被整包引入——建议优先选已做 ESM 发布且声明了 "type": "module" 或 "sideEffects": false 的库

基本上就这些。Tree Shaking 不复杂，但容易忽略模块格式、副作用声明和构建配置这三个关键点。写代码时保持导出粒度清晰、避免意外副作用，再配好工具链，它就会安静地帮你减小包体积。

到这里，我们也就讲完了《JavaScript Tree Shaking是什么？如何移除未使用代码？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！