代码压缩（minification）与优化是减小传输大小与提升加载速度的重要步骤。本文讨论压缩、混淆、tree-shaking 的区别与工程实践。
核心概念
- Minification：移除空白、注释、重命名局部变量以减小文件体积（例如 terser）。
- Uglification / Obfuscation：更激进的名称变换与控制流混淆，目的在于降低可读性与逆向成本。
- Tree-shaking：静态分析并移除未引用的导出，减少代码体积（依赖于 ES module 的静态结构）。
工具链建议
- 使用现代 bundler（Vite/Rollup/webpack）配合 terser 或 esbuild 进行生产构建压缩。
- 配置
mode=production、开启sideEffects字段在package.json（标注无副作用的模块）以提高 tree-shaking 效果。
实践要点
- 优先通过模块化与按需加载减少引入：按路由拆分、动态 import。压缩只是最后一步，核心是减少未必要的依赖。
- 对第三方库采取按需引入或替代方案，避免把大型库全量打包进首屏。
回归与验证
- 在 CI 中保留 sourcemap 并使用
source-map-explorer或webpack-bundle-analyzer定期审查体积变化。对关键页面进行 P95/P99 的下载时间验证。
相关链接：