Vite 构建需分三阶段落地：一、开发阶段通过端口/监听/转译/预构建优化启动与HMR；二、构建阶段用分包/SourceMap/Worker线程/详细报告提升可控性；三、生产输出关注路径/输出目录/资源内联/HTML校验确保部署就绪。
Vite 构建不是“配完就能跑”，而是要分阶段理清目标、动作和验证点。真正落地的实战，核心在三个环节：开发体验保障、构建过程可控、生产输出可靠。下面直接说关键怎么做。
一、开发阶段：确保秒级启动和精准 HMR
这不是靠默认配置就能稳住的，得主动干预几个关键点：
- 显式声明
server.port和server.host，避免端口冲突或本地无法访问； - 启用
server.watch.ignored排除node_modules/.vite、dist等目录，防止文件监听拖慢响应； - 对
.vue或.ts文件启用esbuild作为转译器（而非默认的babel），提升热更新编译速度； - 在
vite.config.js中配置optimizeDeps.include，把高频但未被自动识别的依赖（如lodash-es的子模块）提前预构建，避免首次加载卡顿。
二、构建阶段：让 vite build 可观测、可拆解、可并行
默认 vite build 是黑盒流程，容易卡在某个插件里不报错。实战中必须：
- 开启
build.rollupOptions.output.manualChunks，按业务/框架/工具库分包，既控制 chunk 大小，也方便定位哪块构建耗时高； - 使用
build.sourcemap: 'hidden'（非'true'），保留 map 用于错误分析，又不发到线上； - 对 CPU 密集型任务（如图片压缩、代码混淆）封装为 Worker Threads 插件，主线程只负责调度，避免阻塞；
- 添加
build.reporter: 'verbose'，配合--debug启动，能看清每个插件transform和generateBundle的耗时分布。
三、生产输出：不只是打包，更是部署就绪
生成的 dist 目录要能直接扔进 Nginx 或 CDN，需关注：
- 设置
base: './'（相对路径）或base: '/subpath/'（子目录部署），避免资源 404； - 配置
build.outDir明确输出位置，配合 CI 脚本清理旧产物； - 用
build.assetsInlineLimit控制小资源是否内联，减少请求数，但别盲目调高（影响首屏解析）； - 最后加一条
postbuild脚本，校验dist/index.html是否包含正确<script type="module" src="..."></script>，防止 base 或入口路径错配。
整个过程不需要堆砌插件，关键是每一步都清楚“它在改什么、为什么改、不改会怎样”。构建稳定了，才能腾出手优化体验和安全。
