构建产物分析与 bundle 体积优化的七种手段

首屏体积是性能优化的第一战场。但在动手之前，先要看得懂产物的构成。本文介绍一套从分析到优化的完整流程。

先建立可视化认知

用打包分析工具生成依赖树与体积地图：

# Rspack / Webpack
pnpm add -D webpack-bundle-analyzer
# 或使用 Rspack 内置的 stats 分析

重点关注三件事：哪些包体积异常、哪些代码被重复打包、哪些依赖本可延迟加载。

七种优化手段

1. 代码分割（Code Splitting）

按路由懒加载是最基础的优化，把首屏不必要的代码切出去。

const Home = lazy(() => import('./Home'));

2. 移除未使用代码（Tree-shaking）

确保库以 ESM 形式提供，配合 sideEffects: false 声明，让构建器大胆剔除死代码。

3. 第三方依赖瘦身

• 用 lodash-es 替代 lodash，或直接按需引入；
• 排查「一个工具函数引入整个库」的情况（如 import moment）。

4. 优化依赖版本

相同库的多版本会同时被打入。用 pnpm why 找出版本冲突，统一升级。

5. 压缩与混淆

生产环境务必开启 Terser/SWC minify，并配置合适的压缩等级。

6. 资源外置（external）

将体积大、更新频率低的库（如地图 SDK、图表库）通过 CDN 外链引入，脱离主 bundle。

7. 运行时共享

把 React、Vue 等运行时抽成独立 chunk，配合长缓存策略，让二次访问命中缓存。

建立体积预算

优化要可持续，就要把目标量化。在 CI 中加入体积预算：

{
  "budgets": [
    { "resourceType": "script", "baseline": 300, "budget": 350 }
  ]
}

一旦产物体积超出预算，CI 直接失败，倒逼团队在每次提交时就关注体积。

结语

体积优化没有一劳永逸，它是一套持续治理的机制。把分析工具、预算门槛接入流水线，比一次性的大扫除更有效。