JavaScript 包体积优化：Tree Shaking 与代码压缩
Tree Shaking通过静态分析移除未引用代码，需用ES6模块、支持工具及生产模式；代码压缩则通过删除冗余字符和混淆缩小体积，两者结合可显著优化前端包大小。
前端项目中，JavaScript 包体积直接影响加载速度和用户体验。尤其在构建工具广泛使用的今天，优化打包结果变得尤为关键。Tree Shaking 和代码压缩是两种核心手段，能有效减少最终输出的代码体积。
什么是 Tree Shaking？
Tree Shaking 是一种“摇树”式的优化机制，它通过静态分析 ES6 模块语法（import / export），移除未被引用的模块代码。名字形象地比喻为：把整个依赖树“摇一摇”，没用的叶子（死代码）自然掉落。
要
实现 Tree Shaking，必须满足几个条件：
- 使用 ES6 模块语法，不能用 CommonJS（require）
- 构建工具支持，如 Webpack、Rollup 或 Vite
- 启用生产模式（production mode），通常会自动开启
- 避免副作用引入，或在 package.json 中正确声明 "sideEffects" 字段
例如，你只引入了 lodash 的某个函数：
import { debounce } from 'lodash-es';// 只打包 debounce，其他函数不会进入最终产物
但如果写成 import _ from 'lodash'，就可能引入整个库，造成体积膨胀。
代码压缩：减小文件尺寸
即使 Tree Shaking 移除了无用代码，剩余代码仍可通过压缩进一步缩小体积。压缩主要做三件事：
- 删除空格、换行、注释
- 缩短变量名、函数名（混淆）
- 简化表达式和逻辑结构
常见的压缩工具包括 Terser（用于 JavaScript）和 CSSNano（用于样式）。Webpack 在生产环境下默认集成 TerserPlugin。
举个例子：
function hello(name) {return "Hello, " + name;
}
console.log(hello("Tom"));
压缩后可能变成：
function h(n){return"Hello, "+n}console.log(h("Tom"))虽然可读性下降，但传输体积显著减少。
结合使用效果更佳
Tree Shaking 解决的是“要不要打包”的问题，而代码压缩解决的是“怎么打包更小”的问题。两者互补，缺一不可。
实际项目中建议：
- 优先使用 ES6 模块语法组织代码
- 按需引入第三方库，避免全量导入
- 配置 sideEffects 告知构建工具哪些文件有副作用
- 启用 Terser 并合理配置压缩选项
- 使用 Bundle Analyzer 分析输出，发现异常体积来源
基本上就这些。不复杂，但容易忽略细节。坚持规范写法，构建工具才能更好帮你瘦身。
