[!info] 关联笔记

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

Vite 生产构建

这个概念为什么出现

开发可以按需请求 /src/pages/...；生产若仍发数百源码请求，CDN 与浏览器连接成本会爆。生产构建把应用变成可缓存、可部署、可 tree-shake 的静态资源图。

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

最小闭环

场景：库存后台发版门禁

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

package.json 常见脚本：

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

核心产物直觉

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

配置关注点

• build.outDir assetsDir
• build.sourcemap
• build.rollupOptions.output.manualChunks（谨慎）
• base 部署子路径

边界

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

常见误区

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

工程实践

• CI 必跑 build
• 用 bundle 分析看头部依赖
• 预发布用 preview 或真实静态服务器
• 大依赖路由级拆分

本节总结

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

自测题

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

参考答案

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

延伸阅读

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