JavaScript如何实现TreeShaking？原理详解

珍惜时间，勤奋学习！今天给大家带来《JavaScript如何实现Tree Shaking？它的工作原理是什么？》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

Tree shaking 是打包工具在构建时移除未使用 ES 模块代码的优化机制，依赖静态 import/export 分析，需具名导出、禁用 Babel 转译、声明无副作用等条件才能生效。

Tree shaking 是 JavaScript 打包工具（如 Webpack、Rollup、Vite）在构建时自动移除未使用代码的优化机制，它本身不是 JavaScript 语言特性，而是依赖 ES 模块（ESM）的静态结构 实现的。要让 tree shaking 生效，关键不在“怎么写 JS”，而在于“怎么导出/导入 + 怎么配置打包工具”。

为什么只有 ES 模块支持 tree shaking

ES 模块的 import/export 是静态的：在代码解析阶段就能确定哪些导出被引用、哪些没被引用。而 CommonJS（require/module.exports）是动态的，运行时才决定加载什么，打包器无法安全地判断某个 export 是否真没被用到。

• ✅ 正确（可被 shake）：export const utils = { a: 1 }; + import { a } from './utils.js'
• ❌ 无法 shake（CommonJS）：module.exports = { a: 1 }; + const { a } = require('./utils')
• ⚠️ 注意：即使用了 ESM，如果导出是 export default { a: 1 } 这种对象字面量，默认导出整体可能无法被深度 shake，建议用具名导出

让 tree shaking 生效的关键操作

光写 ESM 不够，还需确保整个链路“干净”：

• 用具名导出代替默认导出：比如 export const foo = () => {} 而非 export default { foo: () => {} }
• 避免副作用干扰：如果模块执行时有副作用（如修改全局变量、发起请求），打包器不敢删它。可通过 /*#__PURE__*/ 注释标记纯函数，或在 package.json 中声明 "sideEffects": false（或显式列出有副作用的文件）
• 禁用 babel 的 ESM 转译：Babel 默认把 export 编译成 module.exports，会破坏静态分析。需设置 babel.config.js 中 presets: [['@babel/preset-env', { modules: false }]]
• 生产模式构建：Webpack 需开启 mode: 'production'；Rollup/Vite 默认启用

一个可被 shake 的简单例子

math.js

export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;
export const PI = 3.14159;

main.js

import { add } from './math.js';
console.log(add(2, 3)); // 只用了 add

构建后，multiply 和 PI 会被移除（前提是满足上述所有条件）。

如何验证 tree shaking 是否生效

最直接的方式是查看最终打包产物（如 dist/main.js）是否包含未使用的导出；更推荐用工具分析：

• Webpack：加 --stats=verbose 或用 webpack-bundle-analyzer
• Rollup：启用 treeshake: { moduleSideEffects: false } 并观察 warning
• Vite：运行 vite build --report 生成 report.html 查看模块依赖图

基本上就这些 —— 它不复杂，但容易忽略配置细节和模块规范的一致性。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript如何实现TreeShaking？原理详解》文章吧，也可关注golang学习网公众号了解相关技术文章。