vite与webpack对比 - 实践

Vite 和 Webpack 都是优秀的构建工具，但它们的理念和实现方式有显著差异。下面我将从多个维度对它们进行详细对比。

核心理念：根本性差异

• Webpack: 是一个 “打包器” (Bundler)。它的工作方式是：从入口文件开始，递归地构建一个依赖图，将所有模块（JS、CSS、图片等）打包成一个或多个 bundle（如 bundle.js）。开发服务器（webpack-dev-server）也是基于这个打包后的 bundle 提供服务。

  • 关键词：先打包，后服务。

• Vite: 是一个 “原生 ES 模块 (ESM) 开发服务器” + “构建应用”。它利用浏览器对 ES 模块的原生承受，将创建环境下的模块依赖处理交给了浏览器本身。它只负责转换和提供源代码，无需打包。

  • 关键词：按需编译，直接服务。

---

对比维度表

维度	Webpack	Vite
核心原理	打包器 (Bundler)。先整体打包，再启动开发服务器。	基于 ESM 的开发服务器。服务器按需编译和供应源文件，由浏览器直接导入。
开发环境启动速度	慢。项目越大，依赖越多，启动越慢。（需要先完成整个打包过程）	极快。无论工程大小，启动速度都极其快。（只启动服务器，无需打包）
开发环境热更新 (HMR)	慢。修改文件后，Webpack 需要重新构建受影响的部分模块，并更新 bundle。项目越大，速度越慢。	快。HMR 在原生 ESM 上执行。当修改一个文件时，只需让浏览器重新请求该文件即可，边界很小，速度极快。
构建产物的优化	非常成熟和强大。拥有极其丰富的插件生态（如 TerserPlugin, CssMinimizerPlugin, SplitChunksPlugin）来进行代码分割、压缩、Tree Shaking 等。	同样优秀。底层使用 Rollup进行生产构建，Rollup 在打包优化方面（Tree Shaking、代码压缩）本身就非常出色。
生态与插件	极其丰富和成熟。拥有海量的 Loader 和 Plugin，几乎能处理任何类型的资源或实现任何需求。社区遇到的所有问题基本都有现成解决方案。	生态快速增长中。插件兼容 Rollup 的格式，生态已经足够覆盖大部分常见场景。但对于非常复杂或小众的需求，可能不如 Webpack 的解决方案多。
配置复杂度	高。功能强大意味着配置复杂。虽然有工具辅助，但编写和理解 webpack.config.js 通常有较高的学习成本。	低。开箱即用，提供了高度优化的默认配置。大部分项目无需额外配置即可获得很好的体验。支持 vue、react、ts、css 等。
适用场景	大型、复杂、高度定制化的任务。需要处理各种特殊资源、有复杂构建步骤的项目。	现代前端任务（Vue, React, Svelte, Lit 等）。追求极速开发体验的项目。库/工具的开发。

---

深入原理：为什么制作体验差异巨大？

Webpack 的开发模式

1. 启动：你运行 npm run dev。
2. 打包：Webpack 开始工作，从 index.js 开始，遍历所有 import，处理所有模块（用 babel 转译 JSX/TS，用 css-loader 处理 CSS 等）。
3. 生成 Bundle：将所有处理后的模块打包成一个或多个大的 .js 文件（bundle）。
4. 启动服务器：开发服务器启动，提供这个打包好的 bundle。
5. 浏览器加载：浏览器请求服务器，得到这个巨大的 bundle 文件并执行。

痛点：第 2 步的打包过程非常耗时，项目越大，依赖越多，等待时间就越长。

Vite 的构建模式

1. 启动：你运行 npm run dev。
2. 启动服务器：Vite 瞬间启动一个服务器，它不会打包你的代码。
3. 浏览器请求：浏览器请求 index.html。
4. 请求源文件：index.html 里通过 <script type="module" src="/src/main.js"> 加载主文件。浏览器看到 type="module"，会像发起 API 请求一样，逐级发起 import 请求。
5. 按需编译：当服务器收到对某个文件的请求（如 ./App.vue），它才会按需编译这个文件（如将 .vue 文件拆解成 template, script, style），然后返回给浏览器。未被请求的文件不会被处理。

优势：

• 启动快：省去了漫长的打包等待时间，服务器是秒启。
• HMR 快：修改一个组件，只需要重新编译该组件并推送更新，与项目大小无关。
• 按需编译：你不可能一开始就访问所有页面，Vite 只编译你当前访问页面所需的核心记录。

---

生产构建

在生产环境中，Vite 和 Webpack 的差异会变小。

• Vite 使用 Rollup进行生产构建。Rollup 本身就以出色的 Tree Shaking 和高效的打包机制闻名。Vite 对其进行了封装，提供了开箱即用的优化。
• Webpack 需要通过插件手动配置各种优化（如代码分割 splitChunks），虽然复杂，但也意味着控制粒度更细，可以应对极其复杂的优化场景。

对于绝大多数应用来说，两者产出的包体积和性能相差无几。

如何选择？

选择 Webpack 要是：

• 你的项目极其复杂，有大量非标准资源需要特殊处理。
• 你需要高度定制化的构建流程。
• 你的项目严重依赖某个只有 Webpack 才有的特定插件。
• 你的团队对 Webpack 部署非常熟悉，迁移成本高。

选择 Vite 如果：

• 你启动一个新项目，尤其是使用 Vue、React、Svelte 等现代框架。
• 开发体验是你优先考虑的因素（快速启动、快速热更新）。
• 你的项目是一个库或包（Vite + Rollup 的工具链非常合适）。
• 你希望降低构建程序的安装复杂度。

总结

特性	赢家	说明
开发启动速度	Vite	碾压性优势，无需打包。
开发热更新 (HMR)	Vite	基于 ESM，更新粒度更细，速度更快。
生产构建优化	平手	Webpack 更可配置，Vite (Rollup) 开箱即用，结果通常都很优秀。
生态成熟度	Webpack ️	经过多年沉淀，生态无敌，解决方案覆盖所有场景。
配置复杂度	Vite ✅	开箱即用，默认配置已优化，学习成本低。

结论：Vite 代表了前端程序链发展的新方向，它利用现代浏览器的原生能力，极大地提升了构建体验。对于大多数新项目来说，Vite 是默认的、更优的选择。而 Webpack 则像一个功能强大的“瑞士军刀”，在处理极其困难和特殊的场景时，依然不可替代。