执行生产构建

Vite 生产构建使用 Rollup 打包，生成优化后的静态资源产物。

执行构建命令

Bash

# 执行生产构建
npm run build

# 或直接调用
vite build

构建输出

Bash

vite v5.x.x building for production...
✓ 42 modules transformed.
dist/index.html                  0.50 kB
dist/assets/index-abc123.js    120.50 kB │ gzip: 40 kB
dist/assets/index-def456.css    10.50 kB │ gzip: 3 kB
✓ built in 1.23s

构建选项

JavaScript

# 指定模式
vite build --mode staging

# 指定输出目录
vite build --outDir dist-staging

# 清空输出目录
vite build --emptyOutDir

# 生成 source map
vite build --sourcemap

配置构建选项

text

export default defineConfig({
  build: {
    outDir: 'dist',           // 输出目录
    emptyOutDir: true,        // 构建前清空
    sourcemap: false,         // 是否生成 source map
    minify: 'esbuild',        // 压缩方式
    assetsInlineLimit: 4096   // 内联阈值（字节）
  }
})

选项	说明	默认值
outDir	输出目录	dist
emptyOutDir	构建前清空目录	true
minify	压缩方式	esbuild
sourcemap	生成 source map	false

构建优化

优化项	说明
Tree Shaking	移除未使用代码
代码分割	拆分 chunk 按需加载
资源哈希	文件名添加哈希缓存友好
代码压缩	使用 esbuild 或 terser

注意：生产构建默认使用 esbuild 压缩，速度更快。

构建产物特点

静态资源带哈希后缀（缓存友好）
CSS 提取到独立文件
JS 按依赖关系分割 chunk
体积优化、Tree Shaking 生效

要点总结

vite build 执行生产构建
输出到 dist 目录
自动优化压缩代码
支持多种构建配置选项

📝 发现内容有误？点击此处直接编辑