个人技术博客

前端工程化与首屏性能优化记录

从构建产物入手，逐步拆解一次首屏优化过程。

1. 先量化，再优化

用 Lighthouse 或浏览器 DevTools 的 Performance 面板拿到 LCP、TBT 等指标，明确当前基线，优化后再对比。

2. 让打包产物“瘦身”

• 路由级代码分割，按需加载，避免首屏拉全量 JS；
• 用 Tree Shaking 去掉未使用的导出；
• 第三方库尽量按需引入（如 ECharts 按模块引入）；
• 产物开启 gzip/br 压缩，Nginx 侧配好对应头。

3. 图片与资源策略

首屏图片使用合适尺寸并加 loading="lazy"（首屏外的），关键图可以用 CDN + WebP/AVIF。图标尽量用 SVG 或字体图标，减少请求数。

4. 缓存与加载顺序

/* 一个最小可用的缓存示例：指纹文件名 + 长缓存 */
location /static/ {
    expires 30d;
    add_header Cache-Control "public, max-age=2592000, immutable";
}

配合文件名指纹，可以做到“内容不变不重新下载，内容变了自动更新”，这是静态资源缓存的推荐姿势。