前端首屏加载优化落地清单（可直接落地 / 自查，分维度 + 实操步骤 + 检查项）
核心遵循**「先基础后进阶、先低成本高收益后深度优化」原则，按资源层、网络层、渲染层、计算层、缓存层、服务端协同6 大维度划分，每个维度含实操步骤 + 落地检查项 + 备注**，适配项目开发 / 重构的全流程优化，可直接作为团队协作的落地标准。
一、资源层优化（核心：减体积、按需加载，低成本高收益）
实操步骤
- 代码压缩与精简：开启打包工具（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，避免跨域请求阻塞
