如何针对单页应用（SPA）优化首屏加载速度？

当优化单页应用（SPA）的首屏加载速度时，需聚焦资源加载效率与渲染优先级，通过减少初始加载体积、优化加载顺序及提升渲染速度实现改善。

资源体积控制：采用代码分割（如Webpack的动态import）拆分非首屏代码，仅加载初始必要模块；压缩图片（使用WebP/AVIF格式）并实施懒加载，减少首屏资源重量。

加载顺序优化：对关键CSS/JS使用preload预加载，非关键资源采用defer/async延迟加载；借助CDN分发静态资源，缩短网络请求路径。

渲染机制调整：结合服务端渲染（SSR）或静态站点生成（SSG）输出首屏HTML，减少客户端JavaScript渲染压力；优化首屏JS执行逻辑，避免长任务阻塞渲染。

可通过Lighthouse检测首屏加载瓶颈，优先优化LCP（最大内容绘制）指标，同时持续监控代码分割与资源压缩对加载速度的实际改善效果。