如何优化javascript打包_webpack的tree shaking原理是什么

Tree Shaking 是 Webpack 在 production 模式下通过静态分析 ES6 import/export 关系剔除未使用导出的优化机制，仅对 ESM 有效，需满足具名引入、sideEffects 正确声明等条件。

Webpack 的 Tree Shaking 是一种在构建阶段自动剔除未使用代码的优化机制，核心目标是减小最终打包体积。它不是运行时行为，也不依赖执行逻辑，而是靠静态分析 ES6 模块的 import/export 关系来判断哪些导出从未被引用，从而安全移除。

Tree Shaking 为什么只对 ES6 模块有效

ES6 模块的导入导出是静态声明（编译期即可确定），比如 import { foo } from './utils.js'，Webpack 能明确知道只用了 foo，而 bar 没被引用。但 CommonJS 的 require() 是动态的，可能受条件、变量影响，无法静态判定依赖路径和导出使用情况，所以不支持 Tree Shaking。

• 避免混用 require 和 import，尤其在同一个模块中
• Babel 配置中必须设 modules: false，否则会把 import 编译成 require，导致 Tree Shaking 失效
• 第三方库若用 CommonJS 发布（如早期 lodash），需借助 lodash-es 等 ESM 版本才能摇掉未用方法

Webpack 中 Tree Shaking 的实际触发条件

它不是“开了就一定生效”的开关，需要同时满足几个前提：

• mode 必须为 'production'：Webpack 5+ 默认开启，开发模式下即使配置了也不会执行剔除
• 模块必须有明确的 export，并且 import 方式是具名或默认的静态引入：例如 import { debounce } from 'lodash' 可摇，import _ from 'lodash' 则整个包都会被打入
• package.json 中正确声明 "sideEffects"：值为 false 表示所有文件都无副作用（可安全摇），值为数组（如 ["*.css", "src/init.js"]）则列出不能被摇的文件；不写或设为 true 会禁用该模块的 Tree Shaking

如何验证 Tree Shaking 是否起作用

最直接的方式是看打包后代码里是否还存在未使用的导出声明，以及是否被标记为 /* unused harmony export xxx */：

标签： css javascript es6 java js json 工具 为什么