Vite快的核心在于开发时基于浏览器原生ESM按需编译、依赖预构建（esbuild）、HMR精准更新，生产用Rollup优化打包；其高级技巧围绕这一体系展开可控干预。
掌握 Vite 构建的高级进阶技巧，关键不在堆配置，而在理解它“为什么快”和“在哪可控”。Vite 的设计哲学是“开发即运行”，所有高级能力都围绕这个核心展开——按需编译、依赖预构建、原生 ESM 服务、Rollup 构建链。下面从四个实战维度讲清真正有用的进阶点。
理解并定制依赖预构建行为
Vite 启动时会用 esbuild 把 node_modules 中的 CommonJS/UMD 包转成 ESM，这是冷启动快的关键。但默认行为有时不够智能：
- 某些包（如含动态
require或非标准导出）可能被跳过或报错，可手动加入optimizeDeps.include强制预构建 - 大型项目首次启动仍慢？用
optimizeDeps.force: true强制重跑预构建，配合--forceCLI 参数快速验证 - 想跳过某包（比如已支持 ESM 的现代库）？加到
optimizeDeps.exclude，避免冗余转换 - 预构建缓存位置在
node_modules/.vite，清理它等价于重做依赖分析
精准控制构建入口与输出结构
默认单页入口（index.html → src/main.js）适合多数场景，但多页、微前端、组件库发布等需要更细粒度控制：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 多页面：在
build.rollupOptions.input中传入对象，键为 chunk 名，值为 HTML 路径（如{ home: 'src/pages/home/index.html' }），Vite 自动提取对应 JS 入口 - 构建产物分离：用
build.rollupOptions.output.manualChunks按模块名/路径规则拆包，例如把lodash单独抽成vendor-lodash.js - 静态资源归类：通过
build.assetsInlineLimit控制小于多少字节的资源内联为 base64；用build.rollupOptions.output.assetFileNames定义图片、字体等文件名格式
深度定制插件生命周期与 HMR 行为
Vite 插件不是“加功能”那么简单，它能介入从请求拦截、代码转换、到热更新通知的全流程：
- 自定义 HMR：在插件
handleHotUpdate钩子中返回要更新的模块数组，比如修改 CSS 预处理器变量后，主动触发相关组件重载 - 拦截 HTML 请求：用
transformIndexHtml动态注入 meta 标签、CDN 脚本或环境变量脚本，比写死在index.html更灵活 - 服务端代理增强：
server.proxy支持函数写法，可基于请求头、路径参数做条件转发，甚至 mock 返回 JSON 数据 - 注意插件顺序：Vite 内置插件（如 vue、css）有默认优先级，自定义插件若需早于它们处理，应设
enforce: 'pre'；若需晚于（如处理已转换完的 JS），设enforce: 'post'
构建时环境感知与条件化配置
Vite 支持运行时决定配置内容，这对 CI/CD 多环境部署至关重要：
- 配置函数写法：
export default defineConfig(({ command, mode }) => { ... })，command是'serve'或'build'，mode是当前环境（如'production'、'staging'） - 环境变量注入：
.env.production中的VUE_APP_API_BASE会被自动挂到import.meta.env下，构建时静态替换，不泄露敏感信息 - 异步配置：支持
async函数，比如读取远程配置中心、生成动态别名或加载证书用于 HTTPS 开发服务器 - 类型安全提示：务必使用
defineConfig+ TypeScript 类型导入（import type { UserConfig } from 'vite'），避免拼写错误导致静默失效
这些技巧不是为了炫技，而是当你遇到构建卡顿、HMR 失效、多环境产物混乱、或需要对接内部基建时，能快速定位问题并精准干预。Vite 的强大，恰恰藏在它“默认不做”的留白里。
