一、首屏慢通常慢在哪里首屏加载不是一个单点问题而是网络、服务端、资源体积和浏览器渲染共同作用。用户打开页面后浏览器要拿 HTML、下载 CSS 和 JS、解析执行、请求接口、渲染主要内容。任何一步拖慢都会影响 LCP 和可交互时间。环节常见问题优化方向TTFB服务端慢、未缓存CDN、接口缓存JS下载包体积大拆包、Tree Shaking图片体积大、无尺寸WebP、懒加载渲染主线程长任务分片、虚拟列表优化前先测量。Lighthouse 可以快速定位真实用户监控能判断影响面。不要只看本地高速网络下的表现移动网络和低端设备更接近真实瓶颈。二、减少首屏关键资源首屏只加载当前视口必要资源低频模块延后。路由级懒加载是最直接的手段管理后台、报表、编辑器、图表库都不应该进入首页首包。import{createRouter,createWebHistory}fromvue-routerexportconstroutercreateRouter({history:createWebHistory(),routes:[{path:/,component:()import(./pages/Home.vue)},{path:/report,component:()import(./pages/Report.vue)},{path:/editor,component:()import(./pages/Editor.vue)},],})依赖也要审计。日期库、图表库、富文本编辑器和图标库是常见大户。能按需引入就不要全量引入能用浏览器原生能力就不要额外拉库。构建后用可视化工具看包组成比凭感觉优化可靠。三、图片与字体要提前治理图片是首屏最大的资源来源之一。首屏主图应压缩成合适尺寸使用 WebP 或 AVIF并通过preload提前加载。非首屏图片使用懒加载所有图片都要设置宽高避免布局偏移。linkrelpreloadasimagehref/hero.webpimgsrc/hero.webpwidth1200height630alt产品截图imgsrc/below.webploadinglazywidth600height400alt详情图字体同样会影响首屏。中文字体文件很大能使用系统字体时优先使用系统字体。必须加载品牌字体时应裁剪字形、设置font-display: swap避免文字长时间不可见。四、缓存和服务端协同前端静态资源应使用内容哈希文件名并设置长期缓存HTML 保持较短缓存确保能拿到最新入口。接口层要减少首屏串行请求必要数据可以服务端聚合避免浏览器瀑布式等待。location /assets/ { expires 365d; add_header Cache-Control public, immutable; } location /index.html { add_header Cache-Control no-cache; }实践顺序建议是先建立性能基线再处理首包 JS、首屏图片、缓存策略和接口瀑布。每次优化后看 LCP、INP、资源大小和错误率。首屏提速不是一次性压缩文件而是让资源加载顺序符合用户真正需要看到和操作的顺序。团队还应设置性能预算并让 CI 在包体积明显增长时提醒。预算不必一开始很严格可以先按核心页面设定首屏脚本大小、关键图片大小和接口数量上限。需求评审时也要讨论性能成本例如新增富文本编辑器是否只在编辑页加载新增图表是否可以懒加载。当前端性能变成日常约束而不是上线前补救首屏体验才会稳定。 本文是《前端工程实战》系列持续更新关注不迷路。 下一篇《Vue3组合式 API状态、请求和组件拆分怎么放》讲性能之外如何治理组件状态与请求边界。 你在实际项目里遇到过首屏资源不大却迟迟无法完成渲染的问题吗评论区聊聊。觉得有用点个赞收藏方便回头查阅 相关可运行源码/资料已整理成资源包可在我主页的资源里自取。
