tree shaking并非自动生效,需同时满足esm语法、正确配置sideeffects字段、生产模式构建三者协同;混用commonjs、遗漏sideeffects或错误导出方式均会导致失效。

Tree Shaking 不是“开了就自动生效”的功能,它依赖一整套协同运作的规则体系。配合得好,未使用的函数、工具类、甚至整个模块都能被精准剔除;配合出错,比如混用 CommonJS 或漏写 sideEffects,整棵树就摇不动——代码照常打包,体积纹丝不动。
统一用 ESM 语法,切断 CommonJS 干扰链
Tree Shaking 只认 import/export,不处理 require 或 module.exports。一旦项目里出现以下任一情况,相关模块就会退出摇树流程:
- 源文件中混写
require('./utils')—— 静态分析中断,整块模块被视为“不可判定” - 引入的第三方库只有 CommonJS 版本(如旧版
lodash)—— 即使用插件转译,也可能丢失导出粒度 - 动态导入:
import(`./${name}.js`)或import('./utils').then(...)—— 运行时才决定加载谁,构建阶段无法标记引用
✅ 正确做法:所有内部模块用命名导出 + 命名导入;选库时优先看 package.json 是否含 "type": "module" 或 "exports" 字段。
显式声明 sideEffects,避免误删副作用代码
有些文件虽然没被 import,但执行即生效(比如注入全局样式、打点初始化、修改内置原型),这类代码不能被摇掉。靠 sideEffects 字段告诉打包工具哪些文件“动不得”:
-
"sideEffects": false—— 全包无副作用,放心摇(推荐库作者设此值) -
"sideEffects": ["*.css", "*.scss"]—— 只保留 CSS 类资源,JS 导出全可分析剔除 -
"sideEffects": ["./src/init.js"]—— 仅该文件有副作用,其余仍可按需摇
⚠️ 注意:这个字段必须写在 package.json 根层级,不是配置文件里;Webpack/Rollup 都会读取它。
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
导出方式决定摇树精度
默认导出(export default { add, subtract })把多个功能捆成一个对象,工具很难判断你是否只用了其中某个属性;而命名导出(export const add = ...; export const subtract = ...)让每个功能独立可追踪:
- 用户写
import { add } from './math'→ 工具能确认subtract未被引用 → 安全剔除 - 用户写
import math from './math'; math.add()→ 整个 default 对象被标记为“已使用” →subtract留在包里
✅ 库开发建议:拆细导出,提供单独入口(如 import debounce from 'lodash-es/debounce'),比 import { debounce } from 'lodash-es' 更利于摇树。
构建工具配置要到位,别让 Tree Shaking “半身不遂”
Rollup 默认开启完整分析;Webpack 则需要手动补全两步,缺一不可:
- 启用导出标记:
optimization.usedExports: true(开发/生产环境都需显式配置) - 触发实际删除:
minimize: true或指定TerserPlugin—— 因为标记只是“画圈”,压缩器才真正“剪枝”
? 小提示:Webpack 5+ 生产模式(mode: 'production')虽默认启用部分优化,但 usedExports 仍需手动开,否则不会标记未使用导出。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










