Vite 构建优化与代码分割：从 chunk 策略到加载性能基线

生产构建 (vite build):
  1. 依赖预构建（dev 已缓存，build 复用）
  2. 模块图遍历 + 代码转换（Vite 插件 + esbuild 转译 TS/JSX）
  3. Rollup 打包：tree shaking、合并、chunk 拆分
  4. 产物压缩：esbuild minify（默认）或 terser

转译是语法层面的（快）
打包是模块层面的（需完整依赖图）
两者解耦：转译可缓存，打包可精细控制

// 源码：只用到了 add
import { add, subtract } from './math'
// 若 subtract 未被使用，Rollup 会将其从产物中移除

// 库 package.json
{
  "sideEffects": false
}

// 如果某些文件有副作用，需要精确声明
{
  "sideEffects": ["./src/styles.css", "*.css"]
}

1. 依赖是 CJS（CommonJS）——需要 esbuild 转 ESM 后才有摇树机会
2. 模块有顶层副作用（调用全局、写文件）
3. 库未声明 sideEffects
4. 使用命名空间 import（import * as ...）限制摇树粒度

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          // 按包名分组
          if (id.includes('node_modules')) {
            if (id.includes('react')) return 'vendor-react'
            if (id.includes('lodash')) return 'vendor-lodash'
            if (id.includes('three')) return 'vendor-three'
            return 'vendor-other'
          }
        },
      },
    },
  },
})

拆太细 -> 请求多、HTTP 开销大
拆太粗 -> 单 chunk 过大、首屏慢
目标：在「请求数」与「体积」之间找平衡

// 路由级懒加载（Vue Router）
const UserPage = () => import('./pages/UserPage.vue')

// 条件加载（图表等重库）
async function loadChart() {
  const { createChart } = await import('echarts')
  createChart(el, data)
}

首屏只加载入口 + 必要 vendor
懒加载模块 -> 生成独立 chunk -> 触发时异步请求

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 关键模块生成 preload 提示
        // 浏览器会在空闲时预取这些 chunk
      },
    },
  },
})

export default defineConfig({
  build: {
    // 小于 4KB 的资源转 base64 内联，减少请求
    assetsInlineLimit: 4096,
  },
})

<!-- 产物中的 <link rel="modulepreload"> 由 Vite 自动生成 -->
<link rel="modulepreload" href="/assets/vendor-react.abc.js" />
<link rel="modulepreload" href="/assets/index.def.js" />

// vite-plugin-compression 或自定义
export default defineConfig({
  plugins: [
    compression({
      algorithm: 'brotliCompress',
      ext: '.br',
      threshold: 10240, // 10KB 以上才压缩
    }),
  ],
})

CDN/Web 服务器根据 Accept-Encoding 选择:
  浏览器发 Accept-Encoding: br -> 返回 .br
  不支持 br -> 回退 gzip -> 再回退原文件
注意：预压缩文件需要服务器静态托管支持

# 构建产物体积
ls -lh dist/assets/*.js

# 用 vite build 的默认警告
# 超过 chunkSizeWarningLimit（默认 500KB）会提示

export default defineConfig({
  build: {
    chunkSizeWarningLimit: 600, // 提示超过 600KB 的 chunk
  },
})

// 接入可视化分析（如 vite-plugin-visualizer / rollup-plugin-visualizer）
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [visualizer({ open: true })],
})

# 检查依赖树
npm ls lodash

# 若出现不同版本，考虑 resolve.dedupe
export default defineConfig({
  resolve: {
    dedupe: ['react', 'lodash'],
  },
})

1. 先量化（体积/请求数/加载时间）
2. 再拆 chunk（vendor + 路由级动态 import）
3. 再缩体积（Tree Shaking + 压缩 + 内联）
4. 最后调加载（preload + CDN + 缓存）