0009. vite vs. webpack
- 1. 🎯 本节内容
- 2. 🫧 评价
- 3. 🤔 传统构建工具都有哪些痛点？
- 4. 🤔 Vite 是如何解决传统构建工具中的这些痛点问题的呢？
- 5. 🆚 vite vs. webpack（开发体验层面）
- 6. 🆚 vite vs. webpack（更全面的对比）
1. 🎯 本节内容
- 传统构建工具的痛点
- 针对传统的构建工具，vite 提供的解决方案
2. 🫧 评价
- 传统构建工具的代表 -> webpack
- 对比传统的构建工具，了解 vite 的一些优势。
- 一句话总结：
- Vite = “更现代，开发体验优先” —— 快、简、爽
- Webpack = “全能定制，生态庞大” —— 强、深、稳
3. 🤔 传统构建工具都有哪些痛点？
- 在 Vite 出现之前，前端开发通常使用 Webpack 等构建工具，这些工具虽然功能强大，但也存在一些痛点。
- 下面以 webpack 为例，看看在 webpack 搭建的工程中，经常会遇到的一些问题：
- 启动速度慢：项目越大，启动时间越长，影响开发效率。
- 热更新慢：每次修改代码后，都需要重新构建整个项目，导致热更新速度慢。
- 配置复杂：Webpack 等工具配置复杂，学习成本高。
注意
- 上述罗列的这些“慢”的痛点，主要是集中在开发阶段。
- 对于最终生产阶段运行的程序的“快”、“慢”而言，并不是 vite 搭建的工程就一定比 webpack 搭建的工程更快。
4. 🤔 Vite 是如何解决传统构建工具中的这些痛点问题的呢？
- 极速启动：利用浏览器原生 ES 模块支持，无需打包，启动速度极快。
- 快速热更新：仅更新修改的模块，保持应用状态，提升开发效率。
- 丰富的功能：支持 TypeScript、JSX、CSS 等，开箱即用。
- 高度可扩展：通过插件系统，轻松集成其他工具和框架。
5. 🆚 vite vs. webpack（开发体验层面）
| 项目 | Vite | Webpack（传统方案） |
|---|---|---|
| 启动时间 | ⚡ 几百毫秒 ~ 1 秒（几乎不会随项目体积变大而变慢） | ⏳ 几秒 ~ 几十秒（随项目增大而变慢） |
| 热更新速度 | ⚡ 毫秒级，精准更新模块 | ⏳ 通常需要重新打包部分 chunk，较慢 |
| 配置复杂度 | ✅ 默认配置够用，简单易上手 | 🛠️ 需要手动配置 loader、plugin、优化项等 |
| 生产构建 | 🧱 基于 Rollup，输出更干净高效 | 🧱 功能更强大但配置复杂，打包体积需手动优化 |
| 学习曲线 | 🟢 低 | 🔵 中~高（尤其对新手） |
注意：时间
- 上述表格中提到时间是日常开发中常见的耗时，以笔记
0001. 从 0 到 1 搭建一个原生的（vanilla） vite 工程为例，demos.1 的 dev 时间410 ms来看，是满足表中 vite 启动⚡ 几百毫秒 ~ 1 秒区间要求的。 - 具体时间还跟电脑配置和当时的运行环境有关，表中直接给定时间的主要目的是做对比，凸显出 vite 的快。
- 以启动时间的对比为例，可以这么理解：
- 如果一个项目是基于 vite 搭建的，其启动时间如果是 1s
- 那么这个项目如果改为 webpack 来搭建，其启动时间将会是几十秒甚至更长
6. 🆚 vite vs. webpack（更全面的对比）
| 对比维度 | Vite | Webpack |
|---|---|---|
| 开发启动速度 | ⚡ 极快（秒开），基于原生 ESM + 按需编译 | ⏳ 较慢（随项目增大变慢），需先打包整个应用 |
| 热更新 HMR 速度 | 🔥 毫秒级，精准到模块/组件，不受项目规模影响 | 🐢 秒级或更久，需重新构建 chunk，项目越大越慢 |
| 构建原理（开发） | 不打包 → 利用浏览器原生 ESM，边请求边编译 | 先打包 → 启动前构建完整 bundle，再启动 dev server |
| 生产构建引擎 | 📦 基于 Rollup（默认），输出更干净、Tree-shaking 更彻底 | 📦 自研打包引擎，功能强大但配置复杂 |
| 配置复杂度 | ✅ 默认零配置，开箱即用；按需扩展简单 | 🛠️ 需手动配置 loader、plugin、优化项等，学习曲线陡峭 |
| 插件生态 | 🌱 成长迅速，兼容 Rollup 插件 + Vite 专属插件 | 🌳 非常成熟庞大（数万个插件），社区支持久 |
| 框架支持 | 🎯 官方深度支持 Vue/React/Svelte/Solid/Astro 等现代框架 | 🧩 通过插件支持所有框架（如 vue-loader, babel-loader），但需手动配置 |
| 依赖预构建 | ✅ 自动使用 esbuild 预打包 node_modules（提升加载性能） | ❌ 无此概念 —— 所有依赖在启动时一并打包 |
| TypeScript 支持 | ✅ 原生支持，无需额外 loader | 🛠️ 需配置 ts-loader 或 babel-loader + @babel/preset-typescript |
| CSS / 预处理器 | ✅ 内置支持 CSS、Less、Sass、PostCSS、CSS Modules 等 | 🛠️ 需配置 style-loader + css-loader + sass-loader 等 |
| 代码分割 / 懒加载 | ✅ 原生支持动态 import()，自动分包 | ✅ 支持，但需配置 SplitChunksPlugin 等优化插件 |
| Tree-shaking | ✅ 生产环境基于 Rollup，效果优秀 | ✅ 支持，但需正确配置 mode、sideEffects 等 |
| 开发服务器 | ✅ 内置，支持 HMR、代理、HTTPS、中间件等 | ✅ 需搭配 webpack-dev-server 使用 |
| 适用项目类型 | 🚀 新项目首选、中小型项目、追求极致开发体验 | 🏗️ 大型复杂老项目、高度定制化需求、微前端、SSR 等成熟架构 |
| 学习成本 | 🟢 低（尤其对新手友好） | 🔵 中~高（配置多、概念多、调试复杂） |
| 社区 & 文档 | 📈 快速增长，官方文档清晰现代 | 📚 非常成熟，资料丰富但部分过时 |
| 未来趋势 | 🌅 主流新项目首选，Vue/React 官方推荐，生态快速扩张 | 🌄 仍广泛用于大型/遗留项目，逐步被 Vite / Modern.js 等替代 |