后端开发教程 - Java、Spring Boot 实战 - msg200.com
[比较] Webpack 和 Parcel，哪一个更好？
什么是捆绑器？
入门
安装依赖项和预处理器
速度
开发服务器
代码拆分
社区和使用情况
选项和定制
结论
嘿，DEV.to 社区。
几乎每个现代 Web 开发人员都使用 Webpack，无论有意还是无意，他们使用的框架都得到了 Webpack 的帮助来捆绑他们的应用程序。
还有另一个名为 Parcel 的捆绑器，它声称是一个零配置捆绑器。
让我们看看这两个人的实际行动。
在我撰写本文时，我正在使用 Webpack 和 Parcel 的最新稳定版本。Webpack 版本是 4.41.5，Parcel 版本是 1.12.4。
这将是一篇基于指向的文章，以便您可以跟踪要点并最终了解哪个更好。
每个部分的满分为 10 分，这两个捆绑器中的任何一个都可以获得 0 到 10 之间的任意数字。
这只是我的观点，你的可能不一样。所以这只是我的个人观点。（不过我也会附上一些理由）
什么是捆绑器？
如果你不知道什么是打包器，它遵循一个简单的概念：你只需要将你的文件（包括 Sass、Less 或 Stylus 等样式文件、图片、字体、JavaScript 文件）传入打包器，它会以无缝的方式将它们组装起来，确保它们在生产环境中完美运行。你的 CSS 预处理器无需进一步操作即可编译并引入。
入门
当您想要开始使用这些捆绑器时，首先必须安装它们（这是一个很好的点，不是吗？），但还需要几个步骤才能开始使用它们。
安装 Webpack 后，您需要创建一个名为的文件webpack.config.js，您应该在此处包含您的配置，以便 Webpack 知道如何处理您的捆绑包。
一个非常基本的 Webpack 配置如下所示（来自官方网站）：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
然后您可以启动 Webpack 来监视您的文件。
但是在 Parcel 中发生的事情很疯狂，您只需创建一个index.html文件并像往常一样使用相对路径包含您的脚本，如下所示：
<html>
<body>
<script src="./index.js"></script>
</body>
</html>
然后开始查看你的index.html文件，就完成了。Parcel 不仅能查看 HTML 文件，还能查看 JavaScript 文件。
我将其标记为 Parcel 10，但 Webpack 必须坚持使用 8。
Webpack：8
包裹：10
安装依赖项和预处理器
关于使用捆绑器的下一个重要事项是您需要使用 Sass 或 Less 等预处理器的帮助。
好吧，你应该这样配置 Webpack 来识别你的预处理器：
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
],
},
};
并且您拥有所需的 npm 包：
npm i --save style-loader css-loader sass-loader
尽管这看起来很可怕，但说实话，并没有那么难。
那 Parcel 呢？还记得 Parcel 的宣传吗？零配置！所以你什么都不用做。所有需要的东西都会自动安装，毫不费力。
Parcel 获得另外 10 分，而 Webpack 获得 8 分。
Webpack：16
包裹：20
速度
吸引您阅读本文的最重要的原因之一可能是性能测试。
我们将尝试一个简单的捆绑，看看哪一个捆绑器的性能更快？
我将从头开始运行每个捆绑器三次，每个捆绑器都有三个捆绑请求。
这app.js是正在打包的文件。它只有一个依赖项，即 Vue.js 和一个console.log。
app.js：
import Vue from 'vue';
console.log('I\'m a bundle');
下图显示了您第一次捆绑（干净目录）时这些捆绑器的工作方式，并且两者都使用生产模式：
| 捆绑器 | 首次运行 | 第二次运行 | 第三次运行 | 平均的 |
|---|---|---|---|---|
| Webpack | 272毫秒 | 261毫秒 | 262毫秒 | 265毫秒 |
| 包裹 | 2440 毫秒 | 2510 毫秒 | 2470 毫秒 | 2473.33 毫秒 |
如您所见，当您第一次捆绑时，Webpack 的表现比 Parcel 好得多（几乎是 9 倍）。
让我们看看当您再次观看和捆绑同一个文件时结果是什么。
对于这次测试，我将添加和删除两次 lorem ipsum 评论，因此一共是四次。
| 捆绑器 | 首次运行 | 第二次运行 | 第三次运行 | 第四次运行 | 平均的 |
|---|---|---|---|---|---|
| Webpack | 202毫秒 | 246毫秒 | 130毫秒 | 104毫秒 | 170.5 毫秒 |
| 包裹 | 71毫秒 | 69毫秒 | 67毫秒 | 54毫秒 | 65.25 毫秒 |
在这其中，Parcel 接管了 Webpack，并且执行速度比 Webpack 更快（几乎是 2.5 倍）。
尽管在观察时 Parcel 的执行速度比 Webpack 更快，这比初始捆绑更重要，因为您大多只会观察和运行一次初始捆绑，但初始捆绑的差异太大了。
在本节中，我将给 Webpack 10 和 Parcel 打 9 分。
Webpack：26
包裹：29
开发服务器
当您构建应用程序时，您很可能正在寻找开发服务器。
这两个捆绑器都提供了开发服务器，但您必须将 Webpack 作为单独的包安装并对其进行配置。
这将是您的webpack.config.json文件：
var path = require('path');
module.exports = {
//...
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
Webpack 在这里获得 9 分，而 Parcel 获得 10 分。
Webpack：35
包裹：39
代码拆分
在实际应用中，代码拆分确实很重要。庞大繁重的文件无法快速加载，网站加载缓慢肯定不是客户或访客想要的。
正如前面提到的，Parcel 声称支持零配置的代码拆分，这是真的。
但是Webpack需要一些配置。
它们都支持动态导入，这很好。
但这个问题确实很烦人。
捆绑代码后，Webpackdist文件夹如下所示：
这非常简洁，虽然需要一些配置来拆分动态组件，但并不难。
所有内容都在其相应的文件夹中，图像、CSS、JavaScript，甚至字体。
Parcel 的dist文件夹就是这样的。你无法控制 Parcel 如何管理这些文件，你的dist文件夹被完全扁平化了，更糟糕的是，你的文件index.html也包含在这些文件之中。这简直是一团糟！
公平地说，由于没有配置功能，Parcel 我给它打 2 分，而 Webpack 在这一部分得到 9 分。
Webpack：44
包裹：41
社区和使用情况
Webpack 非常出名，很多框架都使用 Webpack 作为打包工具，比如我最爱的 Nuxt.js。目前为止，我还没发现哪个框架使用 Parcel。
相比 Parcel，Webpack 拥有更庞大的社区。因此，使用 Webpack 可以找到更多解决问题的方法。
Webpack 有很多扩展，并且还可以使用很棒的配置。
但这并不意味着 Parcel 是一个未知的捆绑器。
我在这里给 Webpack 打 10 分，而 Parcel 打 7 分。
Webpack：54
包裹：48
选项和定制
我想你已经知道本节将要发生什么。
Webpack 在定制方面堪称王者。Parcel 号称是一个零配置打包器，这确实不错，但如果在企业级应用中需要定制，那么就没那么容易了。
Webpack提供了上千种选项供你随意配置，功能非常强大。
Webpack 获得满分 10 分，而 Parcel 仅获得 2 分（不幸的是）。
Webpack：64
包裹：50
结论
Webpack 是这里的赢家，我建议你使用 Webpack，以免以后遇到麻烦。Webpack 非常稳定可靠，我已经用过它数千次了。
我喜欢 Parcel 的易用性，但牺牲了 Webpack 提供的所有选项，让我在只用了一个项目之后就不再使用 Parcel 了。也许如果 Parcel 能dist解决扁平文件夹的问题，并提供更多配置选项，我可能会再次使用 Parcel。
我比较了构建时间并制作了图表。文件夹结构以及本文的所有图片和上下文均真实可靠。如果您需要，请附上此页面的链接，以免造成任何问题。
希望你喜欢这篇文章。请
在下方评论区留言，分享你的想法。