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
立即学习“Java免费学习笔记（深入）”；
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-analyzerRollup：启用 treeshake: { moduleSideEffects: false } 并观察 warningVite：运行 vite build --report 生成 report.html 查看模块依赖图
基本上就这些 —— 它不复杂，但容易忽略配置细节和模块规范的一致性。
以上就是javascript如何实现tree shaking_它如何工作的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543512.html
微信扫一扫 
支付宝扫一扫 
