tree shaking 是打包工具在满足前提条件下自动启用的优化行为，依赖 es 模块静态结构、生产模式、正确副作用声明及无动态 import 等条件。
Tree Shaking 在 JavaScript 中依赖于 ES 模块的静态结构（import/export），本身不是某项可“开启”的独立开关，而是打包工具在满足前提条件下自动启用的优化行为。关键在于：**正确使用 ES 模块语法 + 启用生产模式 + 配置模块解析与副作用声明**。
确保使用 ES 模块语法（而非 CommonJS）
Tree Shaking 只对 import/export 有效，对 require/module.exports 无效。
- 源码中统一用
export const foo = ...和import { foo } from './utils' - 避免混合写法，例如在 ES 模块文件里用
module.exports = {...}会破坏静态分析 - 第三方库若用 CommonJS（如早期 lodash），需通过插件（如
lodash-es）或别名替换为 ESM 版本
Webpack 中的关键配置
Webpack 5+ 默认在 mode: 'production' 下启用 Tree Shaking，但仍需注意以下几点：
-
保持
mode: 'production'—— 开发模式（development）默认关闭该优化 -
设置
optimization.usedExports: true（Webpack 4+ 默认启用，可显式确认） -
在
package.json中声明"sideEffects": false或精确列出有副作用的文件（如["*.css", "src/entry.js"]），否则 Webpack 不敢移除看似未使用的导出（例如只 import 样式文件但没调用） - 避免动态
import()的字符串拼接（如import(`./${name}.js`)），这会导致无法静态分析，相关模块可能被全量保留
Vite / Rollup 的默认行为
Vite（底层 Rollup）默认启用 Tree Shaking，且更激进：
- Rollup 原生基于 ES 模块设计，无需额外开启，只要导出是
const、function等具名形式即可被识别和剔除 - Vite 在生产构建（
vite build）时自动启用，无需手动配置treeShaking选项 - 同样需在
package.json中设置"sideEffects"，否则 CSS、字体等资源导入可能被误删
验证是否生效
不能只看 bundle 大小，要检查实际代码是否被剔除：
- Webpack：启用
stats: 'verbose'或使用webpack-bundle-analyzer查看模块依赖图，确认未引用的 export 是否消失 - Rollup/Vite：查看生成的
.mjs或.js输出文件，搜索未使用的函数名是否还存在 - 在源码中添加一个只导出、从未 import 的函数，构建后检查它是否出现在最终产物中
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
