tree shaking 能安全删除未使用代码,前提是明确声明副作用:通过 package.json 的 sideeffects 字段精确标记有副作用的文件(如 "*.css"、"src/init.js"),或设为 false 表示无副作用;将副作用逻辑封装成函数按需调用;优先选用 esm 版本第三方库并避免默认全量导入。

Tree Shaking 能安全删除未使用代码,前提是打包工具能确认某段代码“执行后不会影响程序行为”。一旦模块存在副作用(比如修改全局变量、注入样式、调用初始化函数),工具就会保守保留整个文件——哪怕你只用了其中一个小函数。避免误删的关键不是“阻止删除”,而是“明确告诉工具哪些能删、哪些不能删”。
在 package.json 中声明 sideEffects
这是最直接有效的方式。该字段告诉 Webpack、Vite 等工具:哪些文件有副作用,其余默认可安全摇掉。
- 全项目无副作用时,写:"sideEffects": false
- 只有个别文件有副作用,精确列出:"sideEffects": ["*.css", "src/init.js", "src/polyfills.ts"]
- 注意:该配置对 node_modules 中的依赖也生效,尤其在 Vite 和 Webpack 5+ 中作用显著
把副作用逻辑封装进函数里
模块顶层执行语句(如直接调用 injectStyles() 或 patchGlobal())会被视为副作用,导致整文件被保留。改用显式导出并手动调用:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- ❌ 错误写法(顶层执行):
import './styles.css';或document.body.classList.add('loaded'); - ✅ 正确写法(封装后按需调用):
export function applyStyles() { import('./styles.css'); },入口文件中显式调用applyStyles() - 这样既保留功能,又让 Tree Shaking 能识别其他未使用的导出
检查第三方库是否真正支持 Tree Shaking
即使你项目配置完美,引入的库若本身含副作用或使用 CommonJS,也会拖累整体效果:
- 优先选 ESM 原生版本:用
lodash-es替代lodash,用date-fns/format替代date-fns - 查看库的
package.json是否有 "module" 字段,且指向.mjs或 ES 模块入口 - 避免
import *或默认导入整包,这类写法会让工具无法判断哪些子功能实际被用到
验证副作用是否被正确处理
开发模式下看不到真实效果,必须走生产构建流程:
- 运行
vite build或webpack --mode=production - 用
rollup-plugin-visualizer或source-map-explorer打开产物,确认本该保留的副作用文件(如global.css)是否仍在,而未使用的工具函数是否标记为unused harmony export - 故意在入口引入一个未使用的导出,再构建对比体积变化——如果体积不变,说明 Tree Shaking 已生效且副作用未干扰判断
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










