一、什么是树摇优化？
想象你正在收拾行李箱去旅行，明明只需要带三件衣服，却把整个衣柜都塞了进去。这时候如果有人帮你把不需要的东西拿出来，行李就会轻便很多。树摇优化（Tree Shaking）就是这样的"行李整理师"——它会在打包代码时，自动剔除没有被用到的部分。
在npm包开发中，我们常常会引入各种工具函数或组件库，但实际可能只用到了其中一小部分。通过树摇优化，最终打包的文件只会包含真正被使用的代码，其他冗余代码都会被移除。
技术栈：JavaScript + Webpack
// mathUtils.js
export function add(a, b) { return a + b } // 会被使用
export function multiply(a, b) { return a * b } // 不会被使用
// main.js
import { add } from './mathUtils'
console.log(add(1, 2)) // 只有add函数被打包
二、副作用标记的作用
有些代码看起来没有被直接使用，但实际上它可能悄悄改变了全局状态（比如在原型链上添加方法）。这类操作被称为"副作用"，如果被错误移除会导致程序崩溃。这时候就需要通过sideEffects标记告诉打包工具："这段代码有特殊作用，别删它！"
典型副作用场景：
- 全局CSS文件导入
- 修改原生对象原型
- 自动执行的初始化脚本
// 在package.json中声明副作用文件
{
"sideEffects": [
"**/*.css",
"src/polyfill.js"
]
}
三、实战优化指南
3.1 编写可摇树代码
确保你的代码像积木一样可以拆解，避免以下情况：
// 反例：工具类方法互相耦合
export default {
add(a, b) { return a + b },
calc: (a, b) => this.add(a, b) + 10 // 这种写法无法被单独摇树
}
// 正例：独立导出函数
export function add(a, b) { /*...*/ }
export function calc(a, b) { /*...*/ }
3.2 第三方库的优化技巧
即使你写得再好，如果引用的库不支持树摇也是白搭。选择库时要注意：
# 查看库的dist文件
lodash-es # 支持按需引入（推荐）
lodash # 全量引入（不推荐）
四、避坑与进阶
4.1 常见问题排查
当发现优化没生效时，检查这些配置：
// webpack.config.js
module.exports = {
mode: 'production', // 开发模式不会启用完全优化
optimization: {
usedExports: true // 启用标记使用代码
}
}
4.2 动态导入的妙用
对于非必要代码，可以用异步加载进一步提升性能：
// 点击按钮时才加载工具库
button.addEventListener('click', async () => {
const utils = await import('./heavyUtils.js')
utils.doSomething()
})
五、技术全景分析
应用场景：
- 组件库开发（如只使用Button却打包了整个Ant Design）
- 工具函数集合（如Lodash的数千个方法）
- 多环境支持代码（如不同浏览器的polyfill）
优缺点对比：
| 优势 | 局限性 |
|------|--------|
| 减少30%-70%代码体积 | 对CommonJS模块效果差 |
| 提升页面加载速度 | 需要ES6模块化写法 |
| 降低内存占用 | 副作用文件需要手动配置 |
注意事项：
- 使用Babel时关闭
@babel/plugin-transform-modules-commonjs转换 - 测试阶段要验证副作用文件是否被保留
- 循环依赖会导致优化失效
六、总结
就像整理房间要区分"常用物品"和"珍藏纪念品"，树摇优化帮助我们区分"必要代码"和"备用代码"。掌握这项技能后，你会发现：
- 打包时间从30秒缩短到8秒
- 生产环境代码缩小40%
- 用户打开页面的速度明显提升
下次发布npm包时，不妨在README里加个徽章：
[]()
这会让你的库更受开发者欢迎，因为谁不喜欢干净利落的代码呢？
评论