构建优化实战：从开发到生产的体积控制

在日常项目中，构建产物体积直接影响首屏加载速度与用户体验。本文总结一套实用策略，帮助把构建体积降到可控范围，同时兼顾开发效率。

审视依赖与替换策略

• 定期用 bundle-analyzer 查看依赖体积；识别出占比大的包并考虑替换或按需引入。
• 对工具库优先选 ESM 版本，避免引入整个库到运行时。

打包配置的常见优化点

• 压缩：开启 terser / esbuild 压缩并去除不可达代码（dead code elimination）。
• Module/Chunk 分割：依据路由和业务边界进行代码分割，避免把次要页面打包到主包。
• Scope hoisting：启用模块扁平化以减少包装代码。

静态资源处理

• 图片按需使用现代格式（WebP/AVIF），并在构建时生成不同分辨率。
• 使用 contenthash 命名，结合 CDN 与长缓存策略。

开发体验的平衡

• 开发时启用快速的 HMR（如 Vite），生产构建使用更严格的体积与性能策略。
• 在 CI 中加入体积阈值检测，避免不经意的回归。

小结

体积优化是一个持续的过程：从依赖选择、构建配置到 CI 监控，都需要制度化并在迭代中保持可视化的数据作为判断依据。