前端性能优化实战：从Core Web Vitals监控到代码分割与缓存策略

脚本专家

前端性能优化是提升用户体验、降低跳出率以及改善SEO排名的关键环节。本文从核心指标监控出发，系统梳理加载、运行时、网络、构建及监控等维度的优化策略，并附带可直接落地的代码示例。

一、性能指标与测量

使用 Web Vitals 库可以轻松采集 LCP、FID 和 CLS 三项核心 Web 指标。

2. import { getCLS, getFID, getLCP } from 'web-vitals';
3. getCLS(console.log);
4. getFID(console.log);
5. getLCP(console.log);

复制代码

- LCP（最大内容绘制）：衡量加载性能，优秀 ≤2.5s，需改进 2.5-4.0s，差 >4.0s。
- FID（首次输入延迟）：衡量交互性，优秀 ≤100ms，需改进 100-300ms，差 >300ms。
- CLS（累积布局偏移）：衡量视觉稳定性，优秀 ≤0.1，需改进 0.1-0.25，差 >0.25。

除了代码采集，还可以通过以下工具进行性能审计：

2. npx lighthouse https://example.com --view
3. # Chrome DevTools Performance 面板
4. # WebPageTest 多地点测试
5. curl "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://example.com"

复制代码

二、加载性能优化

2.1 资源压缩与优化

图片优化建议使用现代格式（WebP / AVIF），并结合响应式图片与懒加载：

2. <img src="image.webp" alt="描述"
3.      srcset="image-400w.webp 400w, image-800w.webp 800w"
4.      sizes="(max-width: 600px) 400px, 800px"
5.      loading="lazy">
6. <picture>
7.   <source srcset="image.avif" type="image/avif">
8.   <source srcset="image.webp" type="image/webp">
9.   <img src="image.jpg" alt="描述" loading="lazy">
10. </picture>

复制代码

代码压缩可借助 Vite 内置的 terser 以及代码分割配置：

2. export default defineConfig({
3.   build: {
4.     minify: 'terser',
5.     terserOptions: {
6.       compress: {
7.         drop_console: true,
8.         drop_debugger: true,
9.       },
10.     },
11.     rollupOptions: {
12.       output: {
13.         manualChunks: {
14.           vendor: ['vue', 'vue-router', 'pinia'],
15.           utils: ['lodash-es', 'dayjs'],
16.         },
17.       },
18.     },
19.   },
20. });

复制代码

2.2 资源预加载与预获取

关键资源使用 preload，未来可能用到的页面使用 prefetch，第三方连接使用 preconnect：

2. <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
3. <link rel="preload" href="/js/hero.js" as="script">
4. <link rel="prefetch" href="/js/about.js">
5. <link rel="preconnect" href="https://api.example.com">

复制代码

也可以根据用户交互智能预加载：

2. document.addEventListener('mouseover', (e) => {
3.   if (e.target.tagName === 'A') {
4.     const url = e.target.href;
5.     if (isSameOrigin(url)) {
6.       const link = document.createElement('link');
7.       link.rel = 'prefetch';
8.       link.href = url;
9.       document.head.appendChild(link);
10.     }
11.   }
12. });

复制代码

2.3 代码分割与懒加载

路由级代码分割使用动态 import：

2. const routes = [
3.   { path: '/', component: () => import('@/views/Home.vue') },
4.   { path: '/about', component: () => import('@/views/About.vue') },
5.   { path: '/admin', component: () => import('@/views/Admin.vue'), meta: { requiresAuth: true } }
6. ];

复制代码

组件级懒加载可借助 Vue 的 defineAsyncComponent：

2. const HeavyChart = defineAsyncComponent({
3.   loader: () => import('@/components/HeavyChart.vue'),
4.   loadingComponent: LoadingSpinner,
5.   delay: 200,
6.   timeout: 3000
7. });

复制代码

按需加载第三方库：

2. const loadLodash = async () => {
3.   const _ = await import('lodash-es');
4.   return _.default;
5. };

复制代码

三、运行时性能优化

3.1 渲染优化

虚拟列表处理大量数据：

2. <template>
3.   <div class="virtual-list" ref="listContainer">
4.     <div :style="{ height: totalHeight + 'px' }">
5.       <div v-for="item in visibleItems" :key="item.id"
6.            :style="{ transform: `translateY(${item.offset}px)`, position: 'absolute', top: 0, left: 0, right: 0 }">
7.         <ItemComponent :item="item" />
8.       </div>
9.     </div>
10.   </div>
11. </template>
12. <script setup>
13. import { ref, computed, onMounted, onUnmounted } from 'vue';
14. const props = defineProps({ items: Array, itemHeight: { type: Number, default: 50 } });
15. const listContainer = ref(null);
16. const scrollTop = ref(0);
17. const visibleCount = 20;
18. const totalHeight = computed(() => props.items.length * props.itemHeight);
19. const visibleItems = computed(() => {
20.   const start = Math.floor(scrollTop.value / props.itemHeight);
21.   const end = Math.min(start + visibleCount, props.items.length);
22.   return props.items.slice(start, end).map((item, index) => ({
23.     ...item,
24.     offset: (start + index) * props.itemHeight
25.   }));
26. });
27. const handleScroll = () => { scrollTop.value = listContainer.value.scrollTop; };
28. onMounted(() => listContainer.value.addEventListener('scroll', handleScroll));
29. onUnmounted(() => listContainer.value.removeEventListener('scroll', handleScroll));
30. </script>

复制代码

防抖与节流函数实现：

2. function debounce(func, wait, immediate = false) {
3.   let timeout;
4.   return function(...args) {
5.     const later = () => {
6.       timeout = null;
7.       if (!immediate) func.apply(this, args);
8.     };
9.     const callNow = immediate && !timeout;
10.     clearTimeout(timeout);
11.     timeout = setTimeout(later, wait);
12.     if (callNow) func.apply(this, args);
13.   };
14. }
16. function throttle(func, limit) {
17.   let inThrottle;
18.   return function(...args) {
19.     if (!inThrottle) {
20.       func.apply(this, args);
21.       inThrottle = true;
22.       setTimeout(() => inThrottle = false, limit);
23.     }
24.   };
25. }

复制代码

3.2 内存优化

通过 AbortController 取消请求避免内存泄漏，使用 WeakMap 自动释放数据：

2. class DataFetcher {
3.   constructor() {
4.     this.abortController = new AbortController();
5.     this.cache = new Map();
6.   }
7.   async fetchData(url) {
8.     try {
9.       const response = await fetch(url, { signal: this.abortController.signal });
10.       const data = await response.json();
11.       this.cache.set(url, data);
12.       return data;
13.     } catch (error) {
14.       if (error.name === 'AbortError') { console.log('Request aborted'); }
15.       else throw error;
16.     }
17.   }
18.   destroy() {
19.     this.abortController.abort();
20.     this.cache.clear();
21.   }
22. }
23. const componentData = new WeakMap();
24. function registerComponent(component, data) {
25.   componentData.set(component, data);
26. }

复制代码

3.3 Web Worker 优化

将繁重计算移至 worker：

2. // 主线程
3. const worker = new Worker('./worker.js');
4. worker.postMessage({ type: 'PROCESS_DATA', data: largeDataSet });
5. worker.onmessage = (e) => updateUI(e.data);
7. // worker.js
8. self.onmessage = (e) => {
9.   const { type, data } = e.data;
10.   if (type === 'PROCESS_DATA') {
11.     const result = heavyComputation(data);
12.     self.postMessage(result);
13.   }
14. };
15. function heavyComputation(data) {
16.   return data.map(item => item * 2).filter(x => x > 10);
17. }

复制代码

四、网络优化

4.1 HTTP/2 与 HTTP/3

Nginx 启用 HTTP/2 并配置推送：

2. server {
3.   listen 443 ssl http2;
4.   server_name example.com;
5.   http2_push /js/app.js;
6.   http2_push /css/style.css;
7.   tcp_nodelay on;
8.   tcp_nopush on;
9. }

复制代码

4.2 缓存策略

使用 Service Worker 实现缓存优先、网络优先与 stale-while-revalidate 策略：

2. const CACHE_NAME = 'v1';
3. const CACHE_STRATEGIES = {
4.   static: ['/', '/index.html', '/css/*', '/js/*'],
5.   api: '/api/*',
6.   images: { pattern: '/images/*', maxAge: 7 * 24 * 60 * 60 }
7. };
8. self.addEventListener('fetch', (event) => {
9.   const url = new URL(event.request.url);
10.   if (CACHE_STRATEGIES.static.some(p => url.pathname.includes(p))) {
11.     event.respondWith(cachedFirst(event.request));
12.   } else if (url.pathname.startsWith('/api/')) {
13.     event.respondWith(networkFirst(event.request));
14.   } else {
15.     event.respondWith(staleWhileRevalidate(event.request));
16.   }
17. });
18. async function cachedFirst(request) {
19.   const cached = await caches.match(request);
20.   if (cached) return cached;
21.   const response = await fetch(request);
22.   if (response.ok) {
23.     const cache = await caches.open(CACHE_NAME);
24.     cache.put(request, response.clone());
25.   }
26.   return response;
27. }

复制代码

4.3 请求合并

批量请求类实现：

2. class RequestBatcher {
3.   constructor(batchSize = 10, batchDelay = 100) {
4.     this.batchSize = batchSize;
5.     this.batchDelay = batchDelay;
6.     this.queue = [];
7.     this.timer = null;
8.   }
9.   add(request) {
10.     return new Promise((resolve, reject) => {
11.       this.queue.push({ request, resolve, reject });
12.       this.flush();
13.     });
14.   }
15.   flush() {
16.     if (this.timer) clearTimeout(this.timer);
17.     if (this.queue.length >= this.batchSize) this.executeBatch();
18.     else this.timer = setTimeout(() => this.executeBatch(), this.batchDelay);
19.   }
20.   async executeBatch() {
21.     const batch = [...this.queue];
22.     this.queue = [];
23.     try {
24.       const responses = await Promise.all(batch.map(item => item.request));
25.       batch.forEach((item, index) => item.resolve(responses[index]));
26.     } catch (error) {
27.       batch.forEach(item => item.reject(error));
28.     }
29.   }
30. }

复制代码

五、构建优化

5.1 依赖分析

查看打包体积：

2. npx webpack-bundle-analyzer dist/stats.json
3. npx source-map-explorer dist/js/*.js
4. vite build --analyze

复制代码

Webpack 分包配置：

2. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
3. module.exports = {
4.   optimization: {
5.     splitChunks: {
6.       chunks: 'all',
7.       cacheGroups: {
8.         vendors: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' },
9.         default: { minChunks: 2, priority: -10, reuseExistingChunk: true }
10.       }
11.     }
12.   },
13.   plugins: [new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false })]
14. };

复制代码

5.2 Tree Shaking

使用 ES Module 导入并配置 sideEffects：

2. import { debounce, throttle } from 'lodash-es'; // ✅ tree-shakeable
3. // package.json
4. {
5.   "sideEffects": ["*.css", "*.scss"]
6. }
7. /*#__PURE__*/ function pureFunction() { return 42; }

复制代码

六、监控与分析

6.1 性能监控

自定义 PerformanceMonitor 采集 LCP、CLS 和 FID，并通过 sendBeacon 上报：

2. class PerformanceMonitor {
3.   constructor() {
4.     this.metrics = {};
5.     this.init();
6.   }
7.   init() {
8.     if ('PerformanceObserver' in window) {
9.       this.observeLCP();
10.       this.observeCLS();
11.       this.observeFID();
12.     }
13.     window.addEventListener('load', () => this.recordLoadPerformance());
14.   }
15.   observeLCP() {
16.     new PerformanceObserver((list) => {
17.       const entries = list.getEntries();
18.       this.recordMetric('LCP', entries[entries.length - 1].startTime);
19.     }).observe({ type: 'largest-contentful-paint', buffered: true });
20.   }
21.   observeCLS() {
22.     let clsValue = 0;
23.     new PerformanceObserver((list) => {
24.       for (const entry of list.getEntries()) {
25.         if (!entry.hadRecentInput) clsValue += entry.value;
26.       }
27.       this.recordMetric('CLS', clsValue);
28.     }).observe({ type: 'layout-shift', buffered: true });
29.   }
30.   recordMetric(name, value) {
31.     this.metrics[name] = value;
32.     this.sendToAnalytics(name, value);
33.   }
34.   recordLoadPerformance() {
35.     const timing = performance.timing;
36.     this.recordMetric('LoadTime', timing.loadEventEnd - timing.navigationStart);
37.   }
38.   sendToAnalytics(name, value) {
39.     navigator.sendBeacon('/api/performance', JSON.stringify({ metric: name, value, timestamp: Date.now() }));
40.   }
41.   getReport() {
42.     return { ...this.metrics, timestamp: new Date().toISOString(), userAgent: navigator.userAgent, url: window.location.href };
43.   }
44. }

复制代码

6.2 错误监控

全局监听 JS 错误和未处理的 Promise 拒绝：

2. window.addEventListener('error', (event) => {
3.   reportError({
4.     type: 'javascript',
5.     message: event.message,
6.     filename: event.filename,
7.     lineno: event.lineno,
8.     colno: event.colno,
9.     error: event.error
10.   });
11. });
12. window.addEventListener('unhandledrejection', (event) => {
13.   reportError({
14.     type: 'promise',
15.     message: event.reason?.message || 'Unhandled promise rejection',
16.     error: event.reason
17.   });
18. });
19. function reportError(error) {
20.   navigator.sendBeacon('/api/error', JSON.stringify({ ...error, timestamp: Date.now(), url: window.location.href, userAgent: navigator.userAgent }));
21.   console.error('Performance Error:', error);
22. }

复制代码

七、实战案例

某电商站点优化前 LCP 4.2s、FID 350ms、CLS 0.35、首屏 5.1s。采取图片 WebP+懒加载、路由+组件级代码分割、预加载关键资源、Service Worker 缓存、启用 HTTP/2 等措施后，LCP 降至 1.8s，FID 85ms，CLS 0.08，首屏仅 2.1s。

总结
性能优化是持续过程，核心策略包括：
- 测量先行，用工具了解现状；
- 从影响最大的地方开始渐进优化；
- 建立监控体系确保效果持续；
- 将性能纳入开发流程。

关键要点：图片优化收益最大，代码分割改善首屏加载，合理缓存提升回访体验，运行时优化增强交互流畅性。定期测量、分析、优化，才能使应用始终保持最佳性能。

热心网友7

楼主这个帖子太实用了！从Core Web Vitals的具体阈值到每步的代码示例，都讲得很清晰，特别是LCP、FID、CLS的衡量标准和优化建议，直接就能对线上项目做对比。Vite配置里的manualChunks拆分vendor和工具库，还有动态import配合defineAsyncComponent的懒加载方案，都是日常开发中很接地气的做法，收藏了慢慢实践。感谢分享！