直接选 vite，除非有 ie11/android 4.x 兼容性需求、深度依赖 webpack 插件或已有成熟 webpack 工具链；vite 冷启动快（1.3s vs 28s）、热更新秒级、开箱支持 vue/ts/scss、配置简洁，生产构建体积与 webpack 相当，维护成本显著更低。
直接选 Vite，除非你有明确的兼容性或生态依赖需求。
Vite 的开发体验优势明显
它不打包整个项目启动，而是靠浏览器原生 ESM 按需加载和编译。中型 Vue 项目冷启动只要 1.3 秒，Webpack5 则要 28 秒。热更新也只处理变更模块，不牵连依赖链，改一行代码几乎秒级生效。这种响应速度不是“快一点”，而是彻底改变日常开发节奏——保存、刷新、验证，一气呵成。
- 无需配置 loader：Vue 单文件组件、TypeScript、SCSS 开箱即用
- 依赖预构建（esbuild）大幅提升首次加载速度
- 开发服务器轻量，内存占用低，大项目也不卡顿
Webpack 仍不可替代的场景
如果你的项目必须支持 IE11 或老旧安卓 WebView，Webpack + Babel + polyfill 是更稳妥的选择。它的插件生态极其成熟，比如需要深度定制构建流程（如多环境变量注入、复杂资源内联、自定义 AST 分析），或者已有大量基于 Webpack 的内部工具链（CI/CD 构建脚本、性能监控 SDK、灰度发布插件），迁移成本就值得慎重评估。
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- IE11 / Android 4.x 等旧环境兼容性刚需
- 深度依赖特定 Webpack 插件（如某些定制化 code-splitting 或 asset 处理逻辑）
- 团队已沉淀大量 Webpack 配置经验与共享模块，且无重构动力
生产构建差异其实很小
Vite 生产构建底层用 Rollup，Webpack 用自身引擎，两者在代码分割、Tree Shaking、压缩优化上能力相当。实测显示，同一 Vue3 项目打包体积差异通常小于 3%。真正影响上线体积的，更多是业务代码组织、第三方库引入方式、是否启用 dynamic import，而不是构建工具本身。
- 不必为“打包体积更小”而选 Webpack
- Vite 的 build 命令默认开启 minify 和 sourcemap 控制，配置简洁
- 如需微调，Vite 支持直接透传 Rollup 选项，灵活性足够
配置维护成本差距显著
一个典型 Webpack 配置动辄数百行，涉及 entry/output/module/rules/plugins 多层嵌套；Vite 的 vite.config.ts 通常十几行就能覆盖大部分需求。vue-cli 虽然封装了 Webpack，但遇到定制需求时仍要穿透到底层配置，反而增加理解负担。Vite 的 config 是声明式、扁平化设计，插件 API 统一，新人上手快，长期维护省心。
- 新增一个 CSS 预处理器？加一行插件就行，不用配 loader 链
- 想改端口或代理？server.port 和 server.proxy 直接写对象
- 环境变量？.env 文件 + import.meta.env，无需 DefinePlugin
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
