前端首屏加载优化落地清单
核心遵循「先基础后进阶、先低成本高收益后深度优化」原则，按资源层、网络层、渲染层、计算层、缓存层、服务端协同六大维度划分。每个维度含实操步骤、落地检查项及备注，适配项目开发或重构的全流程优化，可直接作为团队协作的落地标准。
一、资源层优化（核心：减体积、按需加载）
实操步骤
- 代码压缩与精简：开启打包工具（Webpack/Vite）的 JS/CSS 压缩，启用 Tree-shaking 剔除未引用代码；第三方库按需引入（如 antd/Element 仅引首屏组件、lodash 用 lodash-es 按需导入）。
- 代码分割：基于路由做动态 import（React.lazy+Suspense/Vue defineAsyncComponent），首屏仅打包核心业务代码；通过 splitChunks 抽离公共依赖（如 vue/react、UI 库公共部分）。
- 静态资源格式优化：首屏图片全部替换为 WebP/AVIF（兼容低版本浏览器做降级），字体仅打包首屏所需字符子集。
- 懒加载落地：非首屏图片/视频用 Intersection Observer 实现懒加载，添加 loading 占位；非首屏组件/第三方库（ECharts/地图）触发时再加载/初始化。
- 清理冗余资源：删除首屏无用的 DOM/代码/静态资源，禁止内联大体积 JS/CSS（仅内联首屏核心样式/基础渲染逻辑）。
落地检查项
- 打包后首屏 JS 包体积≤200KB（未压缩），CSS 包体积≤50KB
- 无全量引入的第三方库，首屏仅加载核心依赖
- 首屏图片均为 WebP/AVIF 格式，且做了响应式适配（srcset/sizes）
- 非首屏资源均已做懒加载，无首屏加载非核心资源的情况
- 代码打包后无未引用的冗余代码（可通过 webpack-bundle-analyzer 检查）
备注
- 用
webpack-bundle-analyzer/vite-bundle-visualizer分析包体积，定位大体积依赖并优化 - 图片体积＞200KB 时，做渐进式加载（先模糊缩略图，再加载原图）
二、网络层优化（核心：提速度、减请求）
实操步骤
- 减少请求数：合并首屏的小 CSS/JS 文件，首屏小图标用雪碧图/Iconfont 替代独立图片；合并首屏重复/关联的接口请求（如多个列表接口整合为一个批量接口）。
- 开启 CDN 加速：将所有静态资源（JS/CSS/图片/字体/视频）部署到就近 CDN 节点，分离静态资源和接口域名。
- 网络协议升级：配合服务端开启 HTTP/2/HTTP/3，替代 HTTP1.1。
- 预加载/预连接：首屏关键资源（核心 JS/CSS、首屏主图）用
<link rel="preload">预加载；跨域 CDN/接口域名用<link rel="preconnect">预建立连接。 - 资源优先级：用
<link rel="priority">标记首屏核心资源，让浏览器优先加载。
落地检查项
- 首屏 HTTP 请求数≤20 个（含接口/静态资源）
- 所有静态资源均已部署 CDN，且做了跨域配置
- 服务端已开启 HTTP/2/HTTP/3，且开启了 Keep-Alive
- 首屏关键资源已做预加载/预连接，无加载顺序错乱的情况
- 无首屏无效请求/重复请求，接口均做了数据聚合
备注
- 预加载仅用于首屏核心资源，避免过度使用导致资源竞争
- CDN 资源开启跨域时，配置
Access-Control-Allow-Origin，避免跨域请求阻塞
