运行 vite build 即可生成优化后的静态资源,Vite 默认用 Rollup 自动完成代码分割、资源哈希、CSS/JS 压缩、≤4KB 文件内联及依赖预构建等。

直接运行 vite build 命令即可生成优化后的静态资源。Vite 默认使用预配置的 Rollup,在生产构建阶段自动完成代码分割、资源哈希、CSS/JS 压缩、小文件内联(≤4KB)、第三方依赖预构建等优化动作。
基础构建命令
在项目根目录执行:
-
vite build:使用默认配置,输出到dist/目录 -
vite build --base=/my-app/:指定部署子路径,影响所有资源引用前缀 -
vite build --mode production:显式指定环境(通常默认即为 production)
关键优化行为(无需额外配置即生效)
Vite 在构建时自动处理:
- JS/CSS 按模块图拆分,公共依赖(如 node_modules 中的库)单独打包为
vendor或按需 chunk - 图片、字体等静态资源:≤4KB 的转为 base64 内联;>4KB 的生成带 hash 的独立文件(如
logo.8a7b2c.png) - HTML 中的资源路径(
<script>、<link>、<img src>)自动重写,适配base配置 - 启用 esbuild 压缩:移除注释、缩短变量名,支持
drop_console和drop_debugger(需显式配置)
推荐补充配置(写在 vite.config.js 中)
提升可维护性与部署健壮性:
-
动态 base 路径:通过环境变量控制,避免硬编码
base: import.meta.env.VITE_BASE_URL || '/'
并在.env.production中设VITE_BASE_URL=/app/ -
开启 manifest:生成
manifest.json,便于后端服务映射资源路径build: { manifest: true } -
启用压缩增强:关闭 console 和 debugger
build: { minify: 'esbuild', esbuild: { drop_console: true, drop_debugger: true } } -
分析体积瓶颈:加
rollup-plugin-visualizer插件,构建后打开可视化报告
构建产物说明
最终 dist/(或自定义 outDir)中包含:
-
index.html:入口 HTML,资源链接已带 hash 和 base 前缀 -
assets/目录:含 JS、CSS、图片等,文件名含内容 hash,确保缓存更新 -
manifest.json(若开启):记录每个资源的最终路径与 hash


















