[!info] related notes

• 所属：构建与优化 MOC
• 前置：双路径 · 环境变量
• 后续：代码分割 · 构建分析

Vite 生产构建

这个概念为什么出现

开发可以按需请求 /src/pages/...；生产若仍发数百源码请求，模块请求、解析和依赖瀑布可能拖慢加载。生产构建把应用变成可缓存、可部署、可 tree-shake 的静态资源图。

[!abstract] 一句话理解 Vite 8 的 vite build 使用 Rolldown 打包，默认应用构建生成 dist，完成打包、拆分、资源指纹与压缩；preview 用于本地验收产物而非开发 HMR。

Vite 7 及以前的标准 vite 使用 Rollup；Vite 8 改用 Rolldown/Oxc。旧 build.rollupOptions 是弃用的兼容入口，新配置使用 build.rolldownOptions，具体差异见 Vite 8 迁移指南。

最小闭环

场景：库存后台发版门禁

pnpm build
# 期望：生成 dist/index.html 与 dist/assets/*-hash.js|css
pnpm preview
# 用无 dev 转换的方式打开产物，做登录页冒烟

package.json 常见脚本：

{
  "scripts": {
    "build": "tsc -b && vite build",
    "preview": "vite preview"
  }
}

vite build 本身只转换 TypeScript，不做完整类型检查；上面的 tsc -b 负责检查。Vue 模板通常使用 vue-tsc，以项目脚本为准。

核心产物直觉

产物	作用
index.html	入口，引用 hashed assets
assets/*.js	代码 chunk
assets/*.css	抽取样式
sourcemap（可选）	排障，注意是否上传/公开

配置关注点

• build.outDir assetsDir
• build.sourcemap
• Vite 8：build.rolldownOptions.output.codeSplitting（先测量再手动拆包）
• base 部署子路径

边界

• Node 内置模块不会自动出现在浏览器包中
• import.meta.env 在构建期替换，不是运行时读服务器环境文件
• SSR/库模式另有出口，不混用默认 app 假设

常见误区

[!warning] 常见误区：dev 通过 = 可上线 必须跑 build；很多路径别名、env、动态 import 问题只在 build 暴露。

工程实践

• CI 必跑 build
• 用 bundle 分析看头部依赖
• 本地用 preview 验收产物；预发布使用实际部署服务器配置，preview 不用于生产服务
• 大依赖路由级拆分

本节总结

生产构建是交付合同：把 dev 便利换成部署友好的静态图。

自测题

1. preview 与 dev 本质差别？
2. 为什么 API 密钥不能靠 build 时塞进 VITE_？

参考答案

1. preview 服务构建产物；dev 是按需转换源码的开发服务器。
2. 会进入前端包，用户可下载查看。

延伸阅读

资料	类型	支撑内容
Building for Production	官方	构建