前端性能优化实战指南：从首屏加载到用户体验的全面提升

<!-- 原生懒加载 -->
<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="描述">

<!-- 使用Intersection Observer API -->
<script>
const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  imageObserver.observe(img);
});
</script>

import React, { Suspense, lazy } from 'react';

// 懒加载组件
const LazyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

<template>
  <div>
    <component :is="LazyComponent" v-if="showComponent" />
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue';

const LazyComponent = defineAsyncComponent(() => import('./HeavyComponent.vue'));
const showComponent = ref(false);

// 根据条件加载组件
const loadComponent = () => {
  showComponent.value = true;
};
</script>

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
        common: {
          name: 'common',
          minChunks: 2,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
};

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          ui: ['antd', '@ant-design/icons'],
        },
      },
    },
  },
});

// React Router
import { lazy } from 'react';
import { Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

<!-- DNS预解析 -->
<link rel="dns-prefetch" href="//example.com">

<!-- 预连接 -->
<link rel="preconnect" href="https://fonts.googleapis.com">

<!-- 预加载关键资源 -->
<link rel="preload" href="/critical.css" as="style">
<link rel="preload" href="/hero-image.jpg" as="image">

<!-- 预获取下一页面资源 -->
<link rel="prefetch" href="/next-page.js">

// 预加载图片
function preloadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = resolve;
    img.onerror = reject;
    img.src = src;
  });
}

// 预加载多个资源
async function preloadResources(urls) {
  const promises = urls.map(url => preloadImage(url));
  try {
    await Promise.all(promises);
    console.log('所有资源预加载完成');
  } catch (error) {
    console.error('预加载失败:', error);
  }
}

// 使用Intersection Observer实现智能预加载
const prefetchObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const link = entry.target;
      const href = link.getAttribute('href');
      
      // 预加载链接页面的资源
      const linkElement = document.createElement('link');
      linkElement.rel = 'prefetch';
      linkElement.href = href;
      document.head.appendChild(linkElement);
    }
  });
});

// 观察页面中的链接
document.querySelectorAll('a[href]').forEach(link => {
  prefetchObserver.observe(link);
});

// ❌ 错误：导入整个库
import * as _ from 'lodash';

// ✅ 正确：按需导入
import { debounce, throttle } from 'lodash';

// ✅ 更好：使用具体的子包
import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';

// webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
    sideEffects: false, // 标记所有文件为无副作用
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                modules: false, // 保持ES6模块格式
              }]
            ]
          }
        }
      }
    ]
  }
};

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 移除console
            drop_debugger: true, // 移除debugger
            pure_funcs: ['console.log'], // 移除特定函数调用
          },
          mangle: {
            safari10: true, // 兼容Safari 10
          },
        },
      }),
    ],
  },
};

// 使用PurgeCSS移除未使用的CSS
const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
  plugins: [
    purgecss({
      content: ['./src/**/*.html', './src/**/*.js', './src/**/*.vue'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
};

// 使用styled-components的优化写法
import styled, { css } from 'styled-components';

// ✅ 使用css helper避免重复样式
const baseButtonStyles = css`
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
`;

const PrimaryButton = styled.button`
  ${baseButtonStyles}
  background-color: #007bff;
  color: white;
`;

const SecondaryButton = styled.button`
  ${baseButtonStyles}
  background-color: #6c757d;
  color: white;
`;

<!-- 使用picture元素实现格式回退 -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述" loading="lazy">
</picture>

<!-- 响应式图片尺寸 -->
<img 
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 480px) 100vw, (max-width: 800px) 50vw, 25vw"
  src="medium.jpg" 
  alt="描述"
>

// Webpack图片优化配置
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  plugins: [
    new ImageMinimizerPlugin({
      minimizer: {
        implementation: ImageMinimizerPlugin.imageminMinify,
        options: {
          plugins: [
            ['imagemin-mozjpeg', { quality: 80 }],
            ['imagemin-pngquant', { quality: [0.6, 0.8] }],
            ['imagemin-svgo', {
              plugins: [
                { name: 'preset-default', params: { overrides: { removeViewBox: false } } }
              ]
            }],
          ],
        },
      },
      generator: [
        {
          type: 'asset',
          preset: 'webp-custom-name',
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: ['imagemin-webp'],
          },
        },
      ],
    }),
  ],
};

// 检测浏览器支持的图片格式
class ImageFormatDetector {
  constructor() {
    this.supportedFormats = new Set();
    this.detectFormats();
  }

  async detectFormats() {
    const formats = [
      { format: 'webp', data: 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA' },
      { format: 'avif', data: 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgABogQEAwgMg8f8D///8WfhwB8+ErK42A=' }
    ];

    for (const { format, data } of formats) {
      if (await this.canPlayFormat(data)) {
        this.supportedFormats.add(format);
      }
    }
  }

  canPlayFormat(data) {
    return new Promise((resolve) => {
      const img = new Image();
      img.onload = () => resolve(true);
      img.onerror = () => resolve(false);
      img.src = data;
    });
  }

  getBestFormat(originalUrl) {
    const extension = originalUrl.split('.').pop().toLowerCase();
    
    if (this.supportedFormats.has('avif') && ['jpg', 'jpeg', 'png'].includes(extension)) {
      return originalUrl.replace(/\.(jpg|jpeg|png)$/i, '.avif');
    }
    
    if (this.supportedFormats.has('webp') && ['jpg', 'jpeg', 'png'].includes(extension)) {
      return originalUrl.replace(/\.(jpg|jpeg|png)$/i, '.webp');
    }
    
    return originalUrl;
  }
}

// 使用示例
const detector = new ImageFormatDetector();
setTimeout(() => {
  const optimizedUrl = detector.getBestFormat('image.jpg');
  console.log('优化后的图片URL:', optimizedUrl);
}, 100);

// Express.js缓存头设置
app.use('/static', express.static('public', {
  maxAge: '1y', // 静态资源缓存1年
  etag: true,
  lastModified: true
}));

// 针对不同资源类型设置缓存
app.get('/api/*', (req, res, next) => {
  res.set('Cache-Control', 'no-cache, no-store, must-revalidate');
  next();
});

app.get('*.js', (req, res, next) => {
  res.set('Cache-Control', 'public, max-age=31536000'); // 1年
  next();
});

app.get('*.css', (req, res, next) => {
  res.set('Cache-Control', 'public, max-age=31536000'); // 1年
  next();
});

// sw.js - Service Worker缓存策略
const CACHE_NAME = 'app-cache-v1';
const urlsToCache = [
  '/',
  '/static/css/main.css',
  '/static/js/main.js',
  '/static/images/logo.png'
];

// 安装事件 - 缓存关键资源
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

// 网络请求拦截 - 缓存优先策略
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // 缓存命中，返回缓存资源
        if (response) {
          return response;
        }
        
        // 缓存未命中，发起网络请求
        return fetch(event.request).then(response => {
          // 检查响应是否有效
          if (!response || response.status !== 200 || response.type !== 'basic') {
            return response;
          }
          
          // 克隆响应并缓存
          const responseToCache = response.clone();
          caches.open(CACHE_NAME)
            .then(cache => {
              cache.put(event.request, responseToCache);
            });
          
          return response;
        });
      })
  );
});

// CDN资源优化配置
const cdnConfig = {
  // 静态资源CDN
  staticCDN: 'https://cdn.example.com',
  
  // 图片CDN（支持实时处理）
  imageCDN: 'https://img.example.com',
  
  // 字体CDN
  fontCDN: 'https://fonts.googleapis.com'
};

// 动态CDN URL生成
function getCDNUrl(path, type = 'static') {
  const baseUrl = cdnConfig[`${type}CDN`];
  return `${baseUrl}${path}`;
}

// 图片CDN参数化处理
function getOptimizedImageUrl(imagePath, options = {}) {
  const {
    width = 'auto',
    height = 'auto',
    quality = 80,
    format = 'auto'
  } = options;
  
  const params = new URLSearchParams({
    w: width,
    h: height,
    q: quality,
    f: format
  });
  
  return `${cdnConfig.imageCDN}${imagePath}?${params.toString()}`;
}

// lighthouse-ci.js
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

async function runLighthouse(url) {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {
    logLevel: 'info',
    output: 'html',
    onlyCategories: ['performance'],
    port: chrome.port,
  };
  
  const runnerResult = await lighthouse(url, options);
  
  // 性能分数
  const performanceScore = runnerResult.lhr.categories.performance.score * 100;
  
  // 关键指标
  const metrics = runnerResult.lhr.audits;
  const fcp = metrics['first-contentful-paint'].displayValue;
  const lcp = metrics['largest-contentful-paint'].displayValue;
  const cls = metrics['cumulative-layout-shift'].displayValue;
  
  console.log(`性能分数: ${performanceScore}`);
  console.log(`FCP: ${fcp}`);
  console.log(`LCP: ${lcp}`);
  console.log(`CLS: ${cls}`);
  
  await chrome.kill();
  return runnerResult;
}

// 使用示例
runLighthouse('https://example.com');

// 性能监控工具类
class PerformanceMonitor {
  constructor() {
    this.metrics = {};
    this.init();
  }

  init() {
    // 监听页面加载完成
    window.addEventListener('load', () => {
      this.collectLoadMetrics();
    });

    // 监听LCP
    this.observeLCP();
    
    // 监听FID
    this.observeFID();
    
    // 监听CLS
    this.observeCLS();
  }

  collectLoadMetrics() {
    const navigation = performance.getEntriesByType('navigation')[0];
    
    this.metrics = {
      // DNS查询时间
      dnsTime: navigation.domainLookupEnd - navigation.domainLookupStart,
      
      // TCP连接时间
      tcpTime: navigation.connectEnd - navigation.connectStart,
      
      // 请求响应时间
      requestTime: navigation.responseEnd - navigation.requestStart,
      
      // DOM解析时间
      domParseTime: navigation.domContentLoadedEventEnd - navigation.domContentLoadedEventStart,
      
      // 页面完全加载时间
      loadTime: navigation.loadEventEnd - navigation.loadEventStart
    };
    
    this.sendMetrics();
  }

  observeLCP() {
    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      const lastEntry = entries[entries.length - 1];
      this.metrics.lcp = lastEntry.startTime;
    }).observe({ entryTypes: ['largest-contentful-paint'] });
  }

  observeFID() {
    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      entries.forEach(entry => {
        if (entry.name === 'first-input') {
          this.metrics.fid = entry.processingStart - entry.startTime;
        }
      });
    }).observe({ entryTypes: ['first-input'] });
  }

  observeCLS() {
    let clsValue = 0;
    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      entries.forEach(entry => {
        if (!entry.hadRecentInput) {
          clsValue += entry.value;
        }
      });
      this.metrics.cls = clsValue;
    }).observe({ entryTypes: ['layout-shift'] });
  }

  sendMetrics() {
    // 发送性能数据到监控服务
    fetch('/api/performance', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        url: window.location.href,
        userAgent: navigator.userAgent,
        metrics: this.metrics,
        timestamp: Date.now()
      })
    });
  }
}

// 初始化性能监控
new PerformanceMonitor();

// webpack-bundle-analyzer配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
      reportFilename: 'bundle-report.html'
    })
  ]
};

// 自定义Bundle分析脚本
const fs = require('fs');
const path = require('path');

function analyzeBundleSize(buildDir) {
  const files = fs.readdirSync(buildDir);
  const analysis = {
    totalSize: 0,
    files: []
  };

  files.forEach(file => {
    const filePath = path.join(buildDir, file);
    const stats = fs.statSync(filePath);
    
    if (stats.isFile() && (file.endsWith('.js') || file.endsWith('.css'))) {
      const size = stats.size;
      analysis.totalSize += size;
      analysis.files.push({
        name: file,
        size: size,
        sizeFormatted: formatBytes(size)
      });
    }
  });

  // 按大小排序
  analysis.files.sort((a, b) => b.size - a.size);
  
  console.log('Bundle分析结果:');
  console.log(`总大小: ${formatBytes(analysis.totalSize)}`);
  console.log('文件列表:');
  analysis.files.forEach(file => {
    console.log(`  ${file.name}: ${file.sizeFormatted}`);
  });

  return analysis;
}

function formatBytes(bytes) {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}