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

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

标签： javascript java html js json vite 工具 ai 为什么