## 前端性能优化实践：从 Lighthouse 到实际落地性能优化不是一次性的工作，而是一个持续的过程。本文从真实项目出发，覆盖从性能指标、度量方法到优化手段的完整闭环，每一项都给出可落地的代码。 ## 性能指标与度量 ### Core Web Vitals Google 定义的三个核心体验指标，直接影响搜索排名： | 指标 | 全称 | 含义 | 目标 | 差 | |------|------|------|:----:|:----:| | LCP | Largest Contentful Paint | 最大内容绘制时间 | < 2.5s | > 4.0s | | INP | Interaction to Next Paint | 交互到下一次渲染 | < 200ms | > 500ms | | CLS | Cumulative Layout Shift | 累积布局偏移 | < 0.1 | > 0.25 | > 注意：Google 在 2024 年 3 月用 **INP** 替代了 FID 作为核心指标。INP 衡量的是整个页面生命周期中所有交互的响应速度，比 FID 更严格。 ### 使用 Lighthouse 检测 ```bash # CLI 检测 npx lighthouse https://example.com --view --preset=desktop # 只检测性能 npx lighthouse https://example.com --only-categories=performance ``` ### 在代码中采集真实用户指标 ```typescript // 使用 PerformanceObserver 采集 LCP new PerformanceObserver((entryList) => { const entries = entryList.getEntries() const lastEntry = entries[entries.length - 1] console.log('LCP:', lastEntry.startTime, 'ms') // 上报到监控平台 navigator.sendBeacon('/api/metrics', JSON.stringify({ name: 'LCP', value: lastEntry.startTime, page: location.pathname })) }).observe({ type: 'largest-contentful-paint', buffered: true }) // CLS let clsValue = 0 new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { if (!entry.hadRecentInput) { clsValue += entry.value } } console.log('CLS:', clsValue) }).observe({ type: 'layout-shift', buffered: true }) // INP let maxINP = 0 new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { if (entry.duration > maxINP) { maxINP = entry.duration console.log('INP:', maxINP, 'ms') } } }).observe({ type: 'event', buffered: true }) ``` ### 使用 web-vitals 库（更简单） ```typescript import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals' function report(metric: any) { // 上报到你的监控平台 fetch('/api/metrics', { method: 'POST', body: JSON.stringify({ name: metric.name, value: metric.value }) }) } onLCP(report) onINP(report) onCLS(report) onFCP(report) onTTFB(report) ``` ## 减少加载体积 ### 代码分割：路由级 ```typescript // Vue Router const routes = [ { path: '/about', component: () => import('./pages/About.vue') }, { path: '/dashboard', component: () => import('./pages/Dashboard.vue') } ] ``` ### 代码分割：组件级 ```vue ``` ### 第三方库按需加载 ```typescript // ❌ 全量引入 lodash import _ from 'lodash' _.get(obj, 'a.b.c') // ✅ 按需引入 import get from 'lodash/get' get(obj, 'a.b.c') // ✅ 更好：使用 es-toolkit（tree-shakeable 的 lodash 替代） import { get } from 'es-toolkit' ``` ### 分析体积来源 ```bash # Vite 项目 npx vite-bundle-visualizer # Webpack 项目 npx webpack-bundle-analyzer dist/stats.json ``` ## 图片优化 ### 使用现代图片格式 ```vue

``` **体积对比**（同一张 1920x1080 图片）： | 格式 | 大小 | 说明 | |------|------|------| | JPEG | 350KB | 传统格式 | | WebP | 180KB | 比 JPEG 小 49% | | AVIF | 95KB | 比 JPEG 小 73% | ### 响应式图片 ```html

``` ### 使用 Nuxt Image 组件（Nuxt 项目） ```vue ``` ## 减少 CLS（布局偏移） ### 为图片和嵌入内容预留空间 ```css /* 图片必须设置宽高比 */ img { aspect-ratio: 16 / 9; width: 100%; height: auto; } /* 广告位预留空间 */ .ad-slot { min-height: 250px; } ``` ### 字体加载优化 ```css /* 使用 font-display: swap 避免字体加载阻塞渲染 */ @font-face { font-family: 'CustomFont'; src: url('/fonts/custom.woff2') format('woff2'); font-display: swap; /* 先用系统字体，字体加载后替换 */ } ``` ```html ``` ## 渲染优化 ### 虚拟滚动（大列表） ```vue ``` ### 减少不必要的重新渲染 ```vue ``` ### 防抖与节流 ```typescript import { useDebounceFn, useThrottleFn } from '@vueuse/core' // 搜索输入：停止输入 300ms 后才请求 const search = useDebounceFn((q: string) => { fetch(`/api/search?q=${q}`) }, 300) // 滚动事件：每 100ms 最多执行一次 const onScroll = useThrottleFn(() => { updateScrollPosition() }, 100) ``` ## 网络优化 ### 资源预加载 ```html ``` ### Service Worker 缓存 ```typescript // sw.js const CACHE_NAME = 'app-v1' const PRECACHE_URLS = ['/', '/styles.css', '/app.js'] // 安装时预缓存关键资源 self.addEventListener('install', (event) => { event.waitUntil( caches.open(CACHE_NAME).then(cache => cache.addAll(PRECACHE_URLS)) ) }) // 运行时缓存策略：网络优先，失败回退缓存 self.addEventListener('fetch', (event) => { event.respondWith( fetch(event.request).catch(() => caches.match(event.request)) ) }) ``` ### API 请求优化 ```typescript // 请求去重：同一时间多个相同请求只发一次 const pending = new Map>() async function fetchOnce(url: string): Promise { if (pending.has(url)) return pending.get(url) const promise = fetch(url).then(res => { pending.delete(url) return res.json() }) pending.set(url, promise) return promise } // 请求取消：页面切换时取消未完成的请求 const controller = new AbortController() fetch('/api/large-data', { signal: controller.signal }) // 路由切换时取消 controller.abort() ``` ## SSR 优化（Nuxt） ### 组件级 SSR 优化 ```vue ``` ### 数据预取 ```typescript // Nuxt 中使用 useFetch 自动处理 SSR 数据预取 const { data } = await useFetch('/api/articles') // SSR 时服务端获取数据，客户端 hydrate 时直接复用，不重复请求 ``` ## 构建优化 ### Vite 配置 ```typescript // vite.config.ts export default defineConfig({ build: { // 手动分块 rollupOptions: { output: { manualChunks: { 'vendor-vue': ['vue', 'vue-router', 'pinia'], 'vendor-ui': ['element-plus'], 'vendor-utils': ['lodash-es', 'dayjs'] } } }, // chunk 大小警告阈值 chunkSizeWarningLimit: 1000, // 启用 CSS 代码分割 cssCodeSplit: true, // 压缩 minify: 'terser', terserOptions: { compress: { drop_console: true, // 移除 console.log drop_debugger: true } } } }) ``` ## 性能优化清单按优先级排列，从投入产出比最高的开始： | # | 优化项 | 影响 | 难度 | |---|--------|------|:----:| | 1 | 开启 Gzip/Brotli 压缩 | 体积减少 70% | ⭐ | | 2 | 图片使用 WebP/AVIF | 图片体积减少 50-73% | ⭐ | | 3 | 路由级代码分割 | 首屏 JS 减少 50%+ | ⭐ | | 4 | 图片设置宽高比 | CLS 降到接近 0 | ⭐ | | 5 | 第三方库按需引入 | 体积减少 30-50% | ⭐⭐ | | 6 | 关键字体 preload | LCP 降低 200-500ms | ⭐⭐ | | 7 | 虚拟滚动（大列表） | INP 从秒级降到毫秒级 | ⭐⭐ | | 8 | Service Worker 缓存 | 二次访问秒开 | ⭐⭐⭐ | | 9 | SSR / 静态生成 | FCP 降到 500ms 内 | ⭐⭐⭐ | ## 总结性能优化的原则是**度量优先，优化其次**： 1. 先用 Lighthouse + web-vitals 采集真实数据 2. 找到影响最大的指标（通常 LCP 和 INP） 3. 针对性优化 4. 再度量，验证效果不要凭感觉优化——很多看起来「应该有用」的优化实际效果微乎其微。让数据告诉你该优化什么。

上一篇

下一篇

Comments | 0条评论