Webpack 与 Vite：哪个捆绑器适合您？
**TL;DR：** Vite 通常更快、更易于使用，非常适合小型项目和快速原型设计。 Webpack 提供广泛的自定义功能和庞大的插件生态系统，更适合复杂的大型应用程序。
Webpack 是 Web 开发中广泛使用的打包工具，长期以来一直是事实上的标准。在过去几年中，打包工具社区的新成员 Vite 以更快、更高效的构建方式挑战了 Webpack 的主导地位。在这里，我们将比较和对比这两种工具，以帮助您根据自己的需求选择最佳选项。
Webpack
Webpack 是一款成熟的 JavaScript 打包工具，通过可自定义的配置为 SPA、MPA、开发工具和微前端等不同用例提供广泛支持。它提供许多功能，例如：
维特
Vite 是由 Vue.js 创始人创建的一款快速、现代的构建工具，旨在优化开发和生产工作流程。它提供许多功能，例如：
性能基准
1. 构建时间
构建时间是优化性能时最关键的因素之一。Vite 在后台使用 esbuild 在浏览器中预捆绑依赖项。这种方法减少了开发服务器的启动时间，并通过将 **CommonJS** 和 **UMD** 模块转换为原生 **ESM** 来确保模块兼容性。
然而，当特定路由需要额外的数据、CSS 或文件时，Vite 的按需加载可能会导致不可避免的延迟。相比之下，Webpack 可确保所有站点数据可用，从而加快开发服务器中页面之间的导航速度。
2.热模块替换（HMR）
Webpack 和 Vite 都支持 HMR，但在效率和设置难易程度上有所不同。Webpack 的 HMR 具有高度可配置性，使其成为大型复杂项目的不二之选，尽管随着项目的增长，它的速度可能会变慢。
然而，Vite 利用原生 ES 模块，只需极少的配置即可提供几乎即时的 HMR 更新，这使其成为快节奏前端开发和小型项目的理想选择。对于复杂的多层应用，Webpack 的自定义功能可能更有优势，但为了获得更快、更流畅的开发体验，Vite 的 HMR 通常是最佳选择。
3. 生产构建尺寸
这两种工具都可以创建优化的 bundle，从而减少生产构建的大小。不过，Vite 通常表现更好，因为 Rollup 具有 tree-shaking solid 功能。
我们首先比较一下捆绑时间：
**注意：**测试是在第 11 代英特尔酷睿 ![™]i5-11400H 处理器上运行的。
功能比较
1.配置
Webpack 的配置功能强大，但实施起来可能具有挑战性。要设置一个简单的 React 应用，您需要一个包含 Babel 和 CSS 加载器的配置文件。请参阅以下代码示例。
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
type: 'asset/resource',
},
{
test: /\.json$/,
type: 'json',
parser: {
parse: JSON.parse,
},
},
],
},
resolve: {
extensions: ['.js', '.ts', '.json'],
},
};更多详细信息，请参阅 stackblitz 演示。
另一方面，**Vite** 需要的配置最少。React 应用的简单 **Vite** 设置如下所示：
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});2. 代码分割
这两种工具都可以实现代码拆分，但方式截然不同。在 Webpack 中，代码拆分不可配置，必须作为动态导入或 Webpack 配置文件中的入口点来实现。这可能比较麻烦，但它允许您准确定义代码的拆分方式。
请参阅以下代码示例。
// Webpack - Using dynamic import for code splitting
const LazyComponent = () => import('./LazyComponent.vue');
// This dynamically imports the component only when needed, reducing the initial bundle size.
LazyComponent().then((module) => {
const Component = module.default;
// Render or use Component here
});Vite 使用动态导入自动处理代码拆分。Vite 利用浏览器中的 ES 模块支持，因此您无需复杂的配置即可拆分代码。
const LazyComponent = () => import('./LazyComponent.vue');3. 插件生态系统
丰富的插件生态系统公开围绕着两者，但 Webpack 存在的时间更长，因此插件种类也更多。不过，Vite 正在迅速追赶，许多著名的插件除了 Webpack 版本之外，还创建了 Vite 专用版本。
4. 框架支持
这两种工具都支持各种框架，包括 React、Vue 和 Angular。Webpack 更像是一个独立工具，并为这些框架提供不同级别的支持。
Vite 的特色在于它是由 Vue 的创建者 Evan You 开发的。它开箱即用，无缝支持 Vue。因此，它允许 Vite 与专为该框架设计的自动 HMR 和优化构建无缝集成。
5. 易于使用
由于配置最少且设置简单，Vite 的新手学习难度较低。Webpack 中的大量繁重配置可能会让需要更多动手操作模块打包概念的新开发人员望而却步。
上图来自 npm trends，比较了 Vite 和 Webpack 的**下载量**。它显示 Webpack 的下载量略有下降，而 Vite 的下载量则呈指数级增长。
根据 star-history，Vite 在 Web 开发中迅速流行起来，在 GitHub 星数上超过了 Webpack。目前，Vite 有 68051 颗星，而 Webpack 有 64645 颗星；这确实说明了它的存在。从 2020 年开始，Vite 在开发者中流行的秘诀在于它速度快、易于使用，并且默认使用现代 JavaScript。同时，由于 Webpack 生态系统的成熟，它被广泛使用，因此这两种工具对于当今的在线开发服务市场都很有用。
开发人员体验
1. 社区支持
庞大的社区和丰富的资源始终是 Webpack 的后盾。它还包括大量文档和教程。Vite 发展迅速，但仍需要在社区方面多下功夫。
2. 错误处理
这两种工具都提供了不错的错误处理功能，但 Vite 的错误消息通常更具信息量且更具可操作性。Webpack 的错误消息有时可能很隐晦，需要更多的调试工作。
假设您的导入语句中有一个拼写错误：
//JavaScript file
import { someFunction } from './nonexistentModule';**Webpack 可能会产生如下错误：**
ERROR in ./src/index.js Module not found: Error: Can't resolve './nonexistentModule' in '/Users/username/project/src' @ ./src/index.js 1:0-54
虽然此错误指向文件和行号，但它并不总是提供有关如何解决问题的明确指导。
**Vite 可能会出现这样的错误：**
[vite] Error when evaluating entry point "src/main.js":
Failed to resolve import "./nonexistentModule" from "src/main.js". Does the file exist?
1 | import { someFunction } from './nonexistentModule';
| ^^^^^^^^^^^^^^^^^^^^^
2 |
3 | console.log(someFunction());可能的解决方案：
Did you mean to import './nonexistentModule.js'? - Check if the file path is correct. - See https://vitejs.dev/guide/troubleshooting.html for more info
Vite 的错误信息更加详细，显示：
GitHub 参考
您可以在 stackblitz 中找到完整的示例。
结论
Webpack 是复杂大型应用的首选。相反，Vite 是中小型项目和快速原型设计的最佳选择。在 Webpack 和 Vite 之间进行选择时，请考虑以下因素。
最终的选择取决于您的项目需求和您作为开发人员的偏好。