前端性能优化全攻略：从LCP优化到Bundle体积压缩

## Core Web Vitals指标体系 Google定义的核心指标：LCP（主要内容加载速度目标2.5秒内）、INP（交互响应速度目标200毫秒内）、CLS（视觉稳定性目标低于0.1）。LCP优化需确定LCP元素针对性处理：图片用WebP/AVIF格式、srcset响应式、fetchpriority=high提升优先级。文本LCP优化关键渲染路径，内联Critical CSS避免CSS阻塞首屏。CLS优化：图片设明确宽高或aspect-ratio，动态内容预留min-height或骨架屏，广告Widget用reservation slot预留空间，字体font-display:swap避免阻塞文本。 ## Bundle体积优化策略 代码分割最有效：动态import()按路由懒加载。Tree Shaking用ES模块配sideEffects字段消除未使用代码。依赖分析用webpack-bundle-analyzer可视化替换大依赖：moment.js换day.js，lodash换lodash-es或原生方法。Gzip压缩约70% Brotli约80% CDN预压缩。PurgeCSS移除未使用样式。CSS Modules或Scoped CSS避免冲突减少冗余。字体按需子集化只含实际使用字符。构建推荐Vite开发体验和Rollup生产优化的组合。配置Performance Budget阻止Bundle超限发布。 ## 资源加载与缓存策略 Preload提前加载关键资源，Preconnect提前建立连接，Prefetch空闲加载下页资源。Service Worker策略：Cache First适不变静态资源，Network First适频繁更新API，Stale While Revalidate适允许过期内容。HTTP缓存头Cache-Control/ETag/Last-Modified正确配置避免不必要请求。SPAs考虑SSR/SSG提升首屏SEO。图片loading=lazy延迟加载减少初始请求。Lighthouse CI自动化检测，Real User Monitoring收集真实用户数据。