JavaScript中的Tree Shaking是什么_它如何移除未使用的代码呢

Tree Shaking 是构建时基于 ES 模块静态结构移除未使用导出的优化技术，依赖具名导入、字面量导出和无副作用声明，并需正确配置构建工具。

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 也会失效：

GoEnhance

全能AI视频制作平台：通过GoEnhance AI让视频创作变得比以往任何时候都更简单。

347

查看详情

立即学习“Java免费学习笔记（深入）”；

• 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是什么_它如何移除未使用的代码呢的详细内容，更多请关注php中文网其它相关文章！