网络与工程化

代码分包（Code Splitting）

1颗粒化分包

javascript 复制代码

import { defineConfig } from 'vite';
import react from '@vitejs/react-refresh'; // 或 vue

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        // 核心：精细化控制分包逻辑
        manualChunks(id) {
          // 1. 把极其稳定的基础框架/库单独打包，它们几乎一两年都不会变
          if (id.includes('node_modules/react') || id.includes('node_modules/react-dom')) {
            return 'framework';
          }
          if (id.includes('node_modules/vue') || id.includes('node_modules/pinia')) {
            return 'framework';
          }

          // 2. 把体积大且相对独立的三方库单独抽离
          if (id.includes('node_modules/lodash-es')) {
            return 'utils-lodash';
          }
          if (id.includes('node_modules/echarts') || id.includes('node_modules/zrender')) {
            return 'lib-charts';
          }

          // 3. 剩下的公共第三方依赖，按照包名自动拆分（颗粒化）
          // 这样只要某个依赖没变，它的 chunk 缓存就永远有效
          if (id.includes('node_modules')) {
            const parts = id.toString().split('node_modules/')[1].split('/');
            const packageName = parts[0].startsWith('@') ? `${parts[0]}/${parts[1]}` : parts[0];
            return `vendor-${packageName.replace('@', '')}`;
          }
        },
        // 优化输出的文件名结构，方便 CDN 强缓存
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
      },
    },
    // 调整 chunk 大小警告阈值
    chunkSizeWarningLimit: 600,
  },
});

浏览器只会精准下载这两个改变的小文件

2浏览器知道该怎么去接这些包

a 模块预加载

网络加速原理： 浏览器在刚解析到 HTML 头部时，就会利用 HTTP/2+ 的并发能力去并行下载这些 JS 模块，同时进行预解析和编译

ini 复制代码

默认生成的index.html中 ：<link rel="modulepreload" href="xxx.js">

b 开启 HTTP/2 强缓存与资源压缩

bash 复制代码

server {
    # 1. 开启 HTTP/2 或 HTTP/3 (取决于你的 Nginx 版本和证书)
    listen 443 ssl http2; 
    
    # 2. 针对带 hash 的打包产物（js/css/images），配置强缓存（一年）
    # 因为只要内容变了，hash 必变，所以可以死死缓存住，绝不重复请求
    location /assets/ {
        alias /usr/share/nginx/html/assets/;
        expires 365d;
        add_header Cache-Control "public, immutable"; # immutable 告诉浏览器别拿 F5 烦我，绝对不用去后端校验
    }

    # 3. 针对 index.html，必须配置协商缓存（每次都得问后端文件变了没）
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
        expires -1;
        add_header Cache-Control "no-cache, no-store, must-revalidate";
    }

    # 4. 开启 Brotli 压缩（比 Gzip 压缩率高 20%+，降低网络传输体积）
    brotli on;
    brotli_types text/plain text/css application/javascript application/json image/svg+xml;
}