vue cli 与 vite的区别
一、实现原理
| Vue CLI | Webpack | 传统打包（生成完整 bundle） | 全量打包后启动服务，模块通过打包后加载12 |
| Vite | Rollup（生产环境） | 原生 ES Module（按需加载） | 无打包直接启动服务，浏览器动态加载模块12 |
二、性能表现
- 开发环境速度
- Vue CLI：大型项目启动时间可能超过 60 秒（需全量打包）
- Vite：冷启动 <3 秒，热更新 <100ms（按需编译）
- 生产构建速度
- Vue CLI：依赖 Webpack 优化链，构建速度中等
- Vite：基于 Rollup 的高效 Tree-shaking，构建速度提升 30%-50%
- 依赖处理
- Vue CLI：通过 Webpack 解析所有依赖（速度较慢）
- Vite：使用
esbuild预构建依赖（速度提升 10-100 倍）
三、功能特性
| 热模块替换 (HMR) | 基于 Webpack 的模块级更新 | 原生 ES Module 实现文件级更新17 |
| 插件生态 | 成熟（兼容 Webpack 插件体系） | 兼容 Rollup 插件，生态快速扩展17 |
| 配置灵活性 | 支持深度定制（vue.config.js） | 更轻量级配置（vite.config.js）37 |
四、适用场景
- Vue CLI 推荐场景
- 需要兼容旧版浏览器（如 IE11）
- 依赖 Webpack 特有功能（如复杂代码分割策略）
- Vite 推荐场景
- 现代浏览器优先项目（支持 ES Module）
- 大型单页应用（SPA）或模块化微前端架构
- 尤雨溪官方推荐作为 Vue 3+ 默认工具链
五、版本兼容性
| Vue 版本 | 主要支持 Vue 2（兼容 Vue 3）6 | 原生适配 Vue 3（需插件支持 Vue 2）38 |
| 长期维护 | 2024 年起仅接收安全更新 | 官方持续迭代（含新特性支持）8 |