网络性能优化

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"],
          cacheDirectory: true
        }
      }
    }
  ]
}

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all",
          priority: -10
        },
        common: {
          name: "common",
          minChunks: 2,
          chunks: "initial",
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          "thread-loader",  // 放在耗时的 loader 之前
          {
            loader: "babel-loader",
            options: { cacheDirectory: true }
          }
        ]
      }
    ]
  }
}

module.exports = {
  cache: {
    type: "filesystem",  // 文件系统级缓存
    buildDependencies: {
      config: [__filename]  // 配置变更时使缓存失效
    }
  }
}

npm install --save-dev webpack-bundle-analyzer

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer")

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

// pages.js
export const page1 = { title: "页面一" }
export const page2 = { title: "页面二" }

// main.js — 只导入 page1
import { page1 } from "./pages"
console.log(page1)

module.exports = {
  mode: "production",  // production 模式下自动压缩
  optimization: {
    minimize: true,
    minimizer: [
      new TerserWebpackPlugin({
        parallel: true,       // 并行压缩
        extractComments: false, // 不生成 .LICENSE 文件
        terserOptions: {
          compress: {
            drop_console: true,   // 移除 console
            drop_debugger: true,  // 移除 debugger
            pure_funcs: ["console.log"] // 移除特定函数调用
          }
        }
      }),
      new CssMinimizerWebpackPlugin()
    ]
  }
}

// 路由级别懒加载（以 React Router 为例）
import { lazy, Suspense } from "react"

const BugComponent = lazy(() => import("../pages/BugComponent"))

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Route path="/bug" component={BugComponent} />
    </Suspense>
  )
}

const routes = [
  {
    path: "/bug",
    component: () => import(/* webpackChunkName: "bug" */ "../pages/BugComponent.vue")
  }
]

output: {
  path: path.resolve(__dirname, "dist"),
  filename: "[name].[contenthash:8].js",
  chunkFilename: "[name].[contenthash:8].chunk.js",
  clean: true  // Webpack 5: 每次构建前清理输出目录
}

// Webpack 5 性能优化完整配置示例
// 适用于中大型前端项目

const path = require("path")
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer")
const TerserPlugin = require("terser-webpack-plugin")
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
const CompressionPlugin = require("compression-webpack-plugin")

module.exports = {
  mode: "production",

  entry: {
    app: "./src/index.js",
  },

  output: {
    filename: "[name].[contenthash].js",
    chunkFilename: "[name].[contenthash].chunk.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },

  optimization: {
    // 代码分割
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          priority: 10,
          chunks: "all",
        },
      },
    },
    // 压缩 JS
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          compress: { drop_console: true },
        },
      }),
      // 压缩 CSS
      new CssMinimizerPlugin(),
    ],
  },

  plugins: [
    // 抽离 CSS
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
    }),
    // 分析打包体积
    new BundleAnalyzerPlugin(),
    // Gzip 预压缩
    new CompressionPlugin({
      algorithm: "gzip",
      test: /\.(js|css|html|svg)$/,
      threshold: 10240,
      minRatio: 0.8,
    }),
  ],

  devtool: "source-map"
}

const CompressionPlugin = require("compression-webpack-plugin")

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: "gzip",
      test: /\.(js|css|html|svg)$/,
      threshold: 10240,     // 只处理大于 10KB 的文件
      minRatio: 0.8,        // 压缩率低于 0.8 才处理
      deleteOriginalAssets: false  // 保留原始文件
    })
  ]
}

# Nginx 配置
http {
  # Gzip 压缩
  gzip on;
  gzip_vary on;
  gzip_proxied any;
  gzip_comp_level 6;
  gzip_types text/plain text/css text/xml application/json application/javascript application/xml;
  gzip_min_length 1000;

  # Brotli 压缩（更高效）
  brotli on;
  brotli_comp_level 6;
  brotli_types text/plain text/css application/json application/javascript;
}

HTTP/1.1:  每个请求需要单独的 TCP 连接
┌───┐     ┌───┐     ┌───┐
│ R │ ──→ │ R │ ──→ │ R │  串行请求
└───┘     └───┘     └───┘

HTTP/2:    多路复用，单个连接并行请求
┌───┐
│ R ├───┐
│ R ├───┼──→ 并行传输
│ R ├───┘
└───┘
单个 TCP 连接

HTTP/3:    基于 QUIC，更快的连接建立
┌───┐
│ Q │ ← 0-RTT 连接恢复
│ U │ ← 内置 TLS 1.3
│ I │ ← 解决队头阻塞
│ C │
└───┘

# Nginx 开启 HTTP/2
server {
    listen 443 ssl http2;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
}

// 检测 HTTP/3 支持
async function checkHTTP3Support(url) {
  try {
    const response = await fetch(url, {
      headers: { 'Alt-Used': 'h3' }
    });
    return response.headers.get('alt-svc')?.includes('h3');
  } catch {
    return false;
  }
}

/* 雪碧图（CSS Sprite） */
.icon {
  background-image: url('sprite.png');
  background-repeat: no-repeat;
}

.icon-home { background-position: 0 0; width: 20px; height: 20px; }
.icon-user { background-position: -20px 0; width: 20px; height: 20px; }
.icon-cart { background-position: -40px 0; width: 20px; height: 20px; }

<!-- 内联关键 CSS -->
<head>
  <style>
    /* Critical CSS - 首屏渲染必需的样式 */
    .header { ... }
    .hero { ... }
  </style>
  <!-- 非关键 CSS 异步加载 -->
  <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
</head>

<!-- 内联小图片 -->
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==" alt="icon">

// ❌ 多次请求
const user = await fetch('/api/user');
const posts = await fetch('/api/posts');
const comments = await fetch('/api/comments');

// ✅ 合并请求（后端支持）
const data = await fetch('/api/user-with-details');

// ✅ 使用 GraphQL
const query = `
  query {
    user { id name }
    posts { id title }
    comments { id text }
  }
`;
const data = await fetch('/graphql', {
  method: 'POST',
  body: JSON.stringify({ query })
});

// ✅ 批量请求
const batchRequest = {
  requests: [
    { method: 'GET', path: '/user' },
    { method: 'GET', path: '/posts' }
  ]
};

┌─────────────────────────────────────────────────────┐
│                   浏览器缓存                         │
├──────────────────┬──────────────────────────────────┤
│     强缓存        │         协商缓存                  │
│  Cache-Control   │     Last-Modified               │
│     Expires      │          ETag                   │
│                  │                                  │
│  不请求服务器     │    请求服务器验证                 │
│  直接使用缓存     │    返回 304 或新资源             │
└──────────────────┴──────────────────────────────────┘

# 静态资源 - 长期缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
  # immutable: 文件永不变化，无需验证
}

# HTML 文件 - 协商缓存
location ~* \.html$ {
  add_header Cache-Control "no-cache";
  etag on;
  # 每次请求都验证
}

# API 响应 - 不缓存
location /api/ {
  add_header Cache-Control "no-store, no-cache, must-revalidate";
}

<!-- 内容哈希命名 -->
<script src="app.abc123.js"></script>
<link href="styles.def456.css">

<!-- 长期缓存 + 文件名哈希 -->
<!-- 文件内容变化 → 文件名变化 → 强制更新 -->

<!-- preload: 预加载当前页面必需资源 -->
<link rel="preload" href="critical.js" as="script">
<link rel="preload" href="font.woff2" as="font" crossorigin>
<link rel="preload" href="hero.jpg" as="image">

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

<!-- preconnect: 预连接域名 -->
<link rel="preconnect" href="https://api.example.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

优先级从高到低：
1. <link rel="preload">  - 当前页面必需
2. <script>              - 阻塞渲染
3. <link rel="prefetch"> - 未来页面需要

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

// 预加载关键 CSS
function preloadCSS(url) {
  return new Promise((resolve) => {
    const link = document.createElement('link');
    link.rel = 'preload';
    link.as = 'style';
    link.href = url;
    link.onload = () => {
      link.rel = 'stylesheet';
      resolve();
    };
    document.head.appendChild(link);
  });
}

// 检测用户意图，智能预连接
document.querySelectorAll('a[href]').forEach(link => {
  link.addEventListener('mouseenter', () => {
    const url = new URL(link.href);
    const preconnect = document.createElement('link');
    preconnect.rel = 'preconnect';
    preconnect.href = url.origin;
    document.head.appendChild(preconnect);
  }, { once: true });
});

class RequestQueue {
  constructor(maxConcurrent = 4) {
    this.maxConcurrent = maxConcurrent;
    this.queue = [];
    this.running = 0;
  }

  async add(requestFn) {
    return new Promise((resolve, reject) => {
      this.queue.push({ requestFn, resolve, reject });
      this.process();
    });
  }

  process() {
    while (this.running < this.maxConcurrent && this.queue.length) {
      const { requestFn, resolve, reject } = this.queue.shift();
      this.running++;
      requestFn()
        .then(resolve, reject)
        .finally(() => {
          this.running--;
          this.process();
        });
    }
  }
}

// 使用示例
const queue = new RequestQueue(4);
const results = await Promise.all(
  urls.map(url => queue.add(() => fetch(url).then(r => r.json())))
);

class RequestCache {
  constructor(options = {}) {
    this.cache = new Map();
    this.maxAge = options.maxAge || 60000; // 默认 1 分钟
    this.maxSize = options.maxSize || 100;
  }

  get(key) {
    const item = this.cache.get(key);
    if (!item) return null;

    // 过期则删除
    if (Date.now() - item.timestamp > this.maxAge) {
      this.cache.delete(key);
      return null;
    }
    return item.value;
  }

  set(key, value) {
    // 超过最大容量时清理最旧数据
    if (this.cache.size >= this.maxSize) {
      const oldestKey = this.cache.keys().next().value;
      this.cache.delete(oldestKey);
    }
    this.cache.set(key, { value, timestamp: Date.now() });
  }
}

// 使用示例：带缓存的请求
async function requestWithCache(url, cache) {
  const cached = cache.get(url);
  if (cached) return cached;

  const data = await fetch(url).then(r => r.json());
  cache.set(url, data);
  return data;
}

// 使用 AbortController 取消请求
const controller = new AbortController();

async function fetchWithAbort(url) {
  try {
    const response = await fetch(url, {
      signal: controller.signal
    });
    return await response.json();
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('请求被取消');
    }
    throw error;
  }
}

// 在 React 组件中结合 useEffect 实现请求取消
function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    fetch(url, { signal: controller.signal })
      .then(res => res.json())
      .then(setData)
      .catch(err => {
        if (err.name !== 'AbortError') console.error(err);
      });

    // 组件卸载时取消请求
    return () => controller.abort();
  }, [url]);

  return data;
}

async function fetchWithRetry(url, options = {}) {
  const { retries = 3, delay = 1000, backoff = 2 } = options;

  for (let i = 0; i < retries; i++) {
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      return await response.json();
    } catch (error) {
      if (i === retries - 1) throw error;

      const waitTime = delay * Math.pow(backoff, i);
      console.log(`重试 ${i + 1}/${retries}，等待 ${waitTime}ms`);
      await new Promise(resolve => setTimeout(resolve, waitTime));
    }
  }
}

// main.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/sw.js');
      console.log('SW registered:', registration);
    } catch (error) {
      console.log('SW registration failed:', error);
    }
  });
}

// sw.js
const CACHE_NAME = 'v1';
const STATIC_ASSETS = [
  '/',
  '/styles.css',
  '/app.js'
];

// 安装：预缓存静态资源
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(STATIC_ASSETS))
      .then(() => self.skipWaiting())
  );
});

// 激活：清理旧缓存
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys()
      .then((keys) => Promise.all(
        keys.filter((key) => key !== CACHE_NAME)
            .map((key) => caches.delete(key))
      ))
      .then(() => self.clients.claim())
  );
});

// 请求：缓存优先，回退网络
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((cached) => {
        if (cached) return cached;
        return fetch(event.request).then((response) => {
          // 只缓存同源 GET 请求
          if (response.ok && event.request.method === 'GET') {
            const clone = response.clone();
            caches.open(CACHE_NAME)
              .then((cache) => cache.put(event.request, clone));
          }
          return response;
        });
      })
  );
});

// Cache First - 缓存优先
async function cacheFirst(request) {
  const cached = await caches.match(request);
  if (cached) return cached;
  return fetch(request);
}

// Network First - 网络优先
async function networkFirst(request) {
  try {
    const response = await fetch(request);
    const cache = await caches.open(CACHE_NAME);
    cache.put(request, response.clone());
    return response;
  } catch {
    return caches.match(request);
  }
}

// Stale While Revalidate - 后台更新
async function staleWhileRevalidate(request) {
  const cached = await caches.match(request);

  const fetchPromise = fetch(request).then(response => {
    caches.open(CACHE_NAME).then(cache => cache.put(request, response));
    return response;
  });

  return cached || fetchPromise;
}

Chrome 23+
Firefox 65+
Edge 14+
Safari 16+ (macOS 13+)
Opera 12.1+
IE（不支持）

<picture>
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="描述文字" loading="lazy" />
</picture>

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="描述文字" loading="lazy" />
</picture>

<!-- 方式一：内联 SVG -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="80" fill="#3498db" />
</svg>

<!-- 方式二：引用外部 SVG 文件 -->
<img src="icon.svg" alt="图标" width="48" height="48" />

<!-- 方式三：CSS 背景 -->

.bg-icon {
  background-image: url("icon.svg");
}

/* 通过 url-loader 自动处理 */
.icon-search {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...");
}

// Webpack 配置
{
  test: /\.(png|jpe?g|gif)$/i,
  type: "asset",
  parser: {
    dataUrlCondition: {
      maxSize: 4 * 1024 // 小于 4KB 转 base64
    }
  }
}

<!-- srcset + sizes -->
<img
  src="image-400w.jpg"
  srcset="image-400w.jpg 400w,
          image-800w.jpg 800w,
          image-1200w.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="响应式图片"
  loading="lazy"
/>

是否需要透明？
├─ 是 → 是否是照片类图像？
│       ├─ 是 → WebP（或 AVIF）+ PNG 降级
│       └─ 否 → PNG-8（优先）/ PNG-24
└─ 否 → 是否是照片/色彩丰富？
        ├─ 是 → JPEG / WebP / AVIF
        └─ 否 → 是否是图标/Logo？
                ├─ 是且简单 → SVG（首选）/ PNG
                ├─ 是且复杂 → PNG / WebP
                └─ 极小图标 → Base64 / 雪碧图

用户（北京）→ CDN 边缘节点（北京）→ 源站（杭州）
                ↑                    ↑
            命中缓存：直接返回      未命中：回源拉取

主域名：    www.example.com        → 业务服务器（HTML）
CDN 域名：  cdn.example.com / static.example.com → CDN 节点（JS/CSS/图片）

# Nginx 作为源站时的示例配置
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
    # 设置浏览器缓存
    add_header Cache-Control "public, max-age=31536000, immutable";

    # 设置 CDN 节点缓存
    add_header CDN-Cache-Control "max-age=604800";

    # ETag 用于协商缓存
    etag on;
}

<!-- 使用公共 CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>

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

<!-- 预连接（DNS + TCP + TLS） -->
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

// 页面加载性能
function getPageTiming() {
  const timing = performance.timing;

  return {
    // DNS 解析
    dns: timing.domainLookupEnd - timing.domainLookupStart,
    // TCP 连接
    tcp: timing.connectEnd - timing.connectStart,
    // SSL 握手
    ssl: timing.connectEnd - timing.secureConnectionStart,
    // TTFB（首字节时间）
    ttfb: timing.responseStart - timing.requestStart,
    // 白屏时间（首次渲染）
    fpt: timing.responseEnd - timing.fetchStart,
    // DOM 解析
    domParse: timing.domComplete - timing.domLoading,
    // 页面完全加载
    loadTime: timing.loadEventEnd - timing.navigationStart,
  };
}

// 获取关键资源加载耗时
function getResourceTiming() {
  return performance.getEntriesByType("resource")
    .filter((resource) => ["img", "script", "css"].includes(resource.initiatorType))
    .map((resource) => ({
      name: resource.name,
      type: resource.initiatorType,
      duration: resource.duration,
      size: resource.transferSize,
      ttfb: resource.responseStart - resource.requestStart
    }));
}

function getNetworkInfo() {
  const connection = navigator.connection;

  if (!connection) return null;

  return {
    effectiveType: connection.effectiveType,  // 4g, 3g, 2g
    downlink: connection.downlink,            // Mbps
    rtt: connection.rtt,                      // ms
    saveData: connection.saveData             // 省流模式
  };
}

// 根据网络状况调整策略
function adaptToNetwork() {
  const info = getNetworkInfo();

  if (info?.saveData || info?.effectiveType === '2g') {
    // 低质量图片、减少请求
    return { quality: 'low', preload: false };
  }

  return { quality: 'high', preload: true };
}

function reportPerformance() {
  const data = {
    timing: getPageTiming(),
    resources: getResourceTiming(),
    network: getNetworkInfo(),
    url: location.href,
    userAgent: navigator.userAgent
  };

  // 使用 sendBeacon 确保数据发送
  navigator.sendBeacon('/api/performance', JSON.stringify(data));
}

// 页面加载完成后上报
window.addEventListener('load', () => {
  setTimeout(reportPerformance, 0);
});

// 静态资源（带哈希）：强缓存
// 内容变化 → 文件名变化 → 强制更新
app.abc123.js  → Cache-Control: max-age=31536000, immutable

// HTML/动态内容：协商缓存
index.html     → Cache-Control: no-cache + ETag

// 用户数据：不缓存
/api/user      → Cache-Control: no-store

// 1. 版本号/哈希命名
<script src="app.v2.abc123.js"></script>

// 2. Service Worker 更新
self.addEventListener('activate', (event) => {
  // 清理旧缓存
});

// 3. 主动刷新
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.addEventListener('controllerchange', () => {
    location.reload();
  });
}

<!-- 1. 异步加载 -->
<script async src="analytics.js"></script>

<!-- 2. 延迟加载 -->
<script defer src="widget.js"></script>

<!-- 3. facades（外观模式） -->
<div class="youtube-facade" data-video-id="xxx">
  <img src="thumbnail.jpg">
  <button>播放</button>
</div>
<script>
  // 点击后加载真实播放器
</script>

<!-- 4. 使用 Intersection Observer 延迟加载 -->