构建生产版本

vite build                 # 默认生产构建
vite build --mode staging  # 指定模式
vite build --watch         # 监听模式（适合库开发）
vite build --sourcemap     # 生成 source map

// vite.config.js
export default defineConfig({
  build: {
    // === 输出 ===
    outDir: 'dist',                    // 输出目录
    assetsDir: 'assets',              // 静态资源子目录
    assetsInlineLimit: 4096,          // 内联 base64 阈值（字节）
    emptyOutDir: true,                // 构建前清空输出目录

    // === 代码分割 ===
    rollupOptions: {
      output: {
        manualChunks: { /* ... */ },
      },
    },

    // === CSS ===
    cssCodeSplit: true,               // CSS 代码分割
    cssMinify: 'lightningcss',        // CSS 压缩：'esbuild' / 'lightningcss'
    cssTarget: 'chrome61',            // CSS 目标浏览器（配合 lightningcss）

    // === 输出兼容性 ===
    target: 'modules',                // JS 目标：'modules'（ES2020）/ 'es2015' 等
    modulePreload: { polyfill: true },
    minify: 'esbuild',               // 压缩器：'esbuild' / 'terser' / false

    // === Source Map ===
    sourcemap: false,                 // 是否生成 sourcemap
    // sourcemap: 'hidden',           // 生成但不引用

    // === 文件命名 ===
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name].[hash].js',
        chunkFileNames: 'assets/[name].[hash].js',
        assetFileNames: 'assets/[name].[hash].[ext]',
      },
    },

    // === 其他 ===
    copyPublicDir: true,              // 是否复制 public 目录
    reportCompressedSize: true,       // 报告 gzip 后大小
    chunkSizeWarningLimit: 500,       // chunk 大小警告阈值（KB）
    watch: null,                      // 构建监听
  },
})

// 自动分割：每个动态 import 会生成独立的 chunk
const LazyComponent = lazy(() => import('./HeavyComponent.jsx'))

// 构建产物：
// dist/assets/HeavyComponent.hash.js  ← 独立 chunk
// dist/assets/index.hash.js           ← 主入口

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // 将 React 相关库拆分到独立 chunk
          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
          // 将 UI 库拆分
          'ui-vendor': ['antd', '@ant-design/icons'],
          // 将工具库拆分
          'utils': ['lodash', 'dayjs', 'axios'],
        },
      },
    },
  },
})

manualChunks(id) {
  // node_modules 中的库分包策略
  if (id.includes('node_modules')) {
    // React 生态单独打一个包
    if (id.includes('react') || id.includes('react-dom') || id.includes('react-router')) {
      return 'react-vendor'
    }
    // UI 组件库单独分包
    if (id.includes('antd') || id.includes('@ant-design')) {
      return 'ui-vendor'
    }
    // 其余第三方库
    return 'vendor'
  }
}

// vite.config.js
export default defineConfig({
  build: {
    lib: {
      entry: './src/index.js',          // 库入口
      name: 'MyLib',                     // UMD 全局变量名
      formats: ['es', 'umd', 'cjs'],     // 输出格式：es / umd / cjs / iife
      fileName: (format) => `my-lib.${format}.js`,
    },
    rollupOptions: {
      // 外部化那些不打包进库的依赖
      external: ['react', 'react-dom'],
      output: {
        // 在 UMD/CJS 模式下，这些外部依赖需要有全局变量
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
})

{
  "name": "my-lib",
  "type": "module",
  "main": "./dist/my-lib.cjs.js",       // CJS 入口
  "module": "./dist/my-lib.es.js",      // ESM 入口
  "types": "./dist/index.d.ts",          // 类型声明
  "exports": {
    ".": {
      "import": "./dist/my-lib.es.js",
      "require": "./dist/my-lib.cjs.js",
      "types": "./dist/index.d.ts"
    }
  },
  "files": ["dist"]
}

// vite.config.js
import { resolve } from 'path'

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        admin: resolve(__dirname, 'admin/index.html'),
        nested: resolve(__dirname, 'nested/index.html'),
      },
    },
  },
})

export default defineConfig({
  build: {
    // JS 目标浏览器（传递给 esbuild）
    target: 'es2015',  // 默认 'modules'（≈ es2020）

    // CSS 目标（使用 lightningcss 时）
    cssTarget: 'chrome61',

    // 动态导入 polyfill
    modulePreload: {
      polyfill: true,  // 为旧浏览器注入 modulepreload polyfill
    },
  },
})

npm i -D @vitejs/plugin-legacy terser

import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})

export default defineConfig({
  build: {
    // esbuild（默认）：极快压缩，体积略大于 Terser
    minify: 'esbuild',

    // terser：较慢，压缩率更高，支持高级压缩选项
    // minify: 'terser',
    // terserOptions: {
    //   compress: { drop_console: true },
    // },

    // false：不压缩（不推荐生产环境）
    // minify: false,
  },
})

# 生成构建体积分析（Rollup 的 stats 输出）
vite build --debug

# 可视化分析
npm i -D rollup-plugin-visualizer

// vite.config.js
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({
      open: true,              // 构建后自动打开浏览器
      gzipSize: true,          // 显示 gzip 后大小
      brotliSize: true,        // 显示 brotli 大小
    }),
  ],
})