【11-14】前端首屏优化实战：从 4.2 秒到 1.1 秒的六个改动

优化前的基线

管理后台首屏加载 4.2 秒，打包产物 3.8MB（单个 vendor 包占 2.6MB）。以下按收益从大到小记录六个改动。

改动清单

1. 路由懒加载（-1.4s）

把所有页面组件改为动态 import()，首屏只加载当前路由代码。

2. 拆分 vendor（-0.6s）

将 UI 组件库、图表库从主 vendor 包拆出，图表库延迟到进入报表页时再加载。

3. 接口合并（-0.5s）

首屏原本串行请求 4 个接口，后端提供聚合接口一次返回，节省 3 个往返。

4. 图片压缩与 WebP（-0.3s）

上传侧统一压缩，浏览器支持时返回 WebP 格式。

5. 骨架屏（体感优化）

数据返回前渲染骨架屏，体感等待时间明显缩短。

6. HTTP 缓存（-0.2s）

静态资源带内容哈希文件名，设置一年强缓存。

结果

六步做完，首屏 1.1 秒。总结一句话：先量化，再动手，每一步都对比数据，避免无效优化。