传统构建工具需要先把整个项目打包成 bundle 再启动，项目越大越慢。Vite 开发模式直接用浏览器原生 ESM 按需加载，只转换当前请求的文件，所以秒级冷启动。
生产构建则用 Rollup 做打包优化，兼顾开发体验与产物质量。
定位认知：Vite 不是简单替代 Webpack，而是构建思路的转变——开发与生产采用不同策略。
Vite 的常用能力。
原生 ESM 按需加载。
模块级热更新。
Rollup 兼容 + Vite 专属插件。
esbuild 秒级预打包。
Rollup 代码分割与优化。
Vue/React/Svelte 开箱即用。
把 Vite 用得既快又稳。
用 create-vite 创建，按需选 Vue/React + TS 模板。
配置路径别名、开发代理、环境变量，搭好工程底座。
按需开发自定义插件（如自动导入、自定义转换），提升效率。
配置代码分割、CDN 拆分、gzip，控制产物体积。
两者定位不同，按团队与项目选择。
| 维度 | Vite | Webpack |
|---|---|---|
| 开发启动 | 秒级（ESM） | 较慢（打包） |
| HMR 速度 | 模块级、快 | 模块级、中等 |
| 生态成熟度 | 快速增长 | 非常成熟 |
| 插件机制 | Rollup 兼容 | 自成一派 |
| 适合项目 | 新项目/现代栈 | 存量工程/复杂场景 |
适合。大项目更需要秒级启动与 HMR。生产构建可通过手动分包、缓存策略控制产物质量。
多数项目可以渐进迁移。先并行跑通，再迁移插件与配置。复杂自定义插件可能需要重写。
常见于依赖兼容问题。可配置 optimizeDeps 手动指定或排除，升级依赖版本后重试。
代码分割、懒加载、静态资源 CDN、gzip/brotli、浏览器缓存策略，都是必做项。
