前端性能优化与网络请求#

// Webpack 配置示例
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        },
        commons: {
          name: 'commons',
          minChunks: 2,
          chunks: 'initial',
          minSize: 0
        }
      }
    }
  }
};

// 使用现代图片格式
// WebP：比 JPEG 小 25-35%，支持透明度
// AVIF：比 WebP 更优，但兼容性较差

// 响应式图片
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述">
</picture>

// 懒加载
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy">

// service-worker.js
const CACHE_NAME = 'v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/main.js',
  '/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); // 网络请求
      })
  );
});

// 使用 fetch API 设置优先级
fetch('/api/data', {
  priority: 'high' // high, low, auto
});

// 图片懒加载
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

// 批量请求示例
class BatchRequest {
  constructor(delay = 100) {
    this.requests = [];
    this.timer = null;
    this.delay = delay;
  }

  add(request) {
    this.requests.push(request);
    this.schedule();
  }

  schedule() {
    if (this.timer) clearTimeout(this.timer);
    this.timer = setTimeout(() => this.execute(), this.delay);
  }

  async execute() {
    if (this.requests.length === 0) return;
    
    const batch = this.requests.splice(0, 10); // 每次最多10个
    const results = await Promise.all(
      batch.map(req => fetch(req.url, req.options))
    );
    
    batch.forEach((req, index) => {
      req.resolve(results[index]);
    });
  }
}

// 使用示例
const batch = new BatchRequest();
batch.add({
  url: '/api/user/1',
  resolve: response => console.log('User 1:', response)
});

// 测量页面性能
const perfData = window.performance.timing;
const loadTime = perfData.loadEventEnd - perfData.navigationStart;
console.log(`页面加载时间: ${loadTime}ms`);

// 测量资源加载
const resources = performance.getEntriesByType('resource');
resources.forEach(resource => {
  console.log(`${resource.name} 加载时间: ${resource.duration}ms`);
});

// 用户自定义测量
performance.mark('task-start');
// 执行任务...
performance.mark('task-end');
performance.measure('task-duration', 'task-start', 'task-end');

// 发送性能数据到分析服务
function sendPerformanceData() {
  const data = {
    url: window.location.href,
    fcp: performance.getEntriesByName('first-contentful-paint')[0]?.startTime,
    lcp: performance.getEntriesByName('largest-contentful-paint')[0]?.startTime,
    fid: performance.getEntriesByName('first-input')[0]?.processingStart,
    cls: performance.getEntriesByName('layout-shift')
      .reduce((sum, entry) => sum + entry.value, 0),
    timestamp: Date.now()
  };

  // 使用 navigator.sendBeacon 异步发送
  navigator.sendBeacon('/api/performance', JSON.stringify(data));
}

// 页面卸载时发送数据
window.addEventListener('beforeunload', sendPerformanceData);

// Vite 配置示例
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash', 'dayjs']
        }
      }
    },
    // 代码分割
    chunkSizeWarningLimit: 1000,
    // 资源内联阈值
    assetsInlineLimit: 4096
  }
};

// Lighthouse 自动化测试
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

async function runAudit(url) {
  const chrome = await chromeLauncher.launch();
  const options = {
    logLevel: 'info',
    output: 'json',
    onlyCategories: ['performance'],
    port: chrome.port
  };

  const runnerResult = await lighthouse(url, options);
  const report = runnerResult.report;
  
  await chrome.kill();
  return JSON.parse(report);
}

// WebPageTest 集成
// 使用 webpagetest-api 包进行自动化测试