大家好，很高兴又见面了，我是"高级前端 进阶 "，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

高级前端 进阶

1.什么是Parcel

Parcel 是JavaScript、CSS、HTML、TypeScript、React、images、SASS、SVG、Vue、libraries、Less、CoffeeScript、Node、Stylus、Pug、Electron、Elm、WebGL、extensions、GraphQL、MDX、XML等的零配置构建工具。

Parcel 将出色的开箱即用开发体验与可扩展的架构相结合，可以用于新项目或者大规模部署的生产项目。

2.Parcel特性

2.1 一个优秀的构建工具

Parcel 提供出色的开发体验，包括：从一个新项目开始，到迭代、调试，再到交付到生产。 开发者无需再关心配置，或花费数小时来跟上最佳实践，因为它本身就是开箱即用的！

Parcel 支持多种语言和文件类型，从 HTML、CSS 和 JavaScript 等 Web 技术到图像、字体、视频等内容。 当开发者使用默认不包含的文件类型时，Parcel 会自动安装所有必要的插件和开发依赖项！

• Parcel 集成开箱即用的开发服务器，只需运行 parcel index.html 即可。使用 --https 标志运行 Parcel，它会自动为您生成证书。同时，Parcel 还有一个内置的 API 代理，可以帮助模拟生产环境。
• 当进行代码更改时，Parcel 会自动在浏览器中更新代码，无需重新加载页面。Parcel 还与 React Fast Refresh 和 Vue Hot Reloading API 集成，以在更新期间自动保留应用程序状态。从而提供即时反馈，而不会脱离上下文。
• 如果在代码或配置中出错，Parcel 会在终端和浏览器中显示漂亮的诊断信息。

2.2 快如闪电

Parcel 使用工作线程（Worker Thread）并行代码构建，充分利用机器上的所有内核。一切都被缓存，所以你永远不会构建相同的代码两次。

原生性能

Parcel 的 JavaScript 编译器、CSS 转换器和 source map 实现是用 Rust 编写的，以实现最佳性能，它比其他基于 JavaScript 的工具快 10-20 倍！

Parcel 的 JavaScript 编译器建立在 SWC 之上，它处理转译 JavaScript、JSX 和 TypeScript。 在 SWC 之上，Parcel 实现了依赖收集、打包、范围提升、tree shaking、Node 仿真、热重载等。

Parcel 的 CSS 转换器和压缩器是在 Firefox 中使用的浏览器级 CSS 解析器之上的 Rust 中构建的。 它比其他基于 JavaScript 的转换器和压缩器快 100 倍以上。

多核架构

Parcel 是围绕多核架构设计的，该架构可并行处理所有内核的工作并充分利用现代硬件。转换单个源文件是并行的，打包和优化输出包也是如此。 所有这些都是完全自动的，不需要插件或与 Parcel 集成的其他工具的任何支持。

可靠缓存

Parcel 所做的一切都被缓存，包括转换、依赖解析、打包、优化等等工作。这意味着开发服务器会立即重新启动，并且永远不会构建相同的代码两次。

Parcel 自动跟踪构建中涉及的所有文件、配置、插件和开发依赖项，并在某些内容发生变化时使缓存失效。 它与底层操作系统 API 集成，无论项目大小如何，都可以在几毫秒内确定哪些文件发生了变化。

懒惰的开发构建

在开发中，Parcel 可以推迟构建文件，直到在浏览器中请求它们。 这意味着只需要等待实际正在构建的页面！ 如果项目有很多条目或代码拆分点，这可以大大减少开发服务器的启动时间。

当确实请求一个页面时，Parcel 足够聪明，可以立即构建该页面的所有依赖项，而无需等待它们也被请求！

自动生产优化

Parcel 会自动优化整个应用程序以进行生产。 这包括 tree-shaking 和压缩的 JavaScript、CSS 和 HTML、调整和优化图像大小、内容散列、自动代码拆分等等。

• Parcel 开箱即用地支持 ES 模块和 CommonJS 的 tree-shaking！ 它静态分析每个模块的导入和导出，并删除所有未使用的内容。Tree Shaking 甚至可以跨动态 import() 边界、共享包甚至跨语言工作！ 如果您使用 CSS 模块，未使用的类将自动删除。
• Parcel 包括开箱即用的 JavaScript、CSS、HTML 和 SVG 压缩器！只需运行 parcel build index.html，整个应用程序将自动构建和优化。
• Parcel 支持调整大小、转换和优化图像！ 在 HTML、CSS、JavaScript 等中引用图像文件时，只需传递所需格式和大小的查询参数，Parcel 就会负责转换和优化过程。您甚至可以为不同的设备或浏览器请求同一源图像的多种尺寸或格式！
• 当应用程序的多个部分依赖于相同的公共模块时，它们会自动删除重复数据到一个单独的包中。 这允许常用的依赖项与您的应用程序代码并行加载，并由浏览器单独缓存！CSS 也支持代码拆分。 如果从 JavaScript 导入 CSS，则会生成一个兄弟 CSS 包，并与 JS 包并行加载。
• Parcel 自动在所有输出文件的名称中包含内容哈希。这启用了浏览器缓存，除非名称发生变化，否则输出保证不会更改。

支持任何转换目标

Parcel 会自动为目标环境转换代码。从现代和遗留浏览器支持，到零配置 JSX 和 TypeScript 编译，Parcel 使构建任何目标（或许多目标）变得容易！

3.Parcel vs. Webpack

3.1 无配置文件

Parcel 不需要配置

如果之前使用过 webpack 3，就会知道 webpack.config。 即使是创建一个最小的项目，也需要一个 webpack.config 文件。 这个文件定义了诸如入口文件、输出文件、是否使用 babel 等等。 通常，配置 webpack 需要花费相当多的时间。

另一方面，Parcel 不使用配置文件。 开发者所要做的就是运行 CLI 并将入口文件作为参数传递，它会自动找出打包所需的一切。

Webpack 4 也不需要配置

作为对 Parcel 发布的响应，webpack 在其最新版本的 webpack 中实现了“0-config”，称为 webpack 4。这是否意味着开发者应该使用 webpack 4？ 或者与 Parcel 与 webpack 4 相比是否有一些独特的优势？下面将进行进一步的比较。

3.2 零配置的比较

默认配置

对于一个简单的“hello world”应用，webpack 和 parcel 都不需要任何配置文件。 只需要运行：

parcel build

或者:

webpack;

但是两者默认值有一些不同。 Webpack 期望在 ./src 中有一个 index.js 文件，而 parcel 默认该文件在根路径中，同时两者都将包输出到 ./dist

Entry 入口

Parcel 的妙处在于，可以将 index.html 文件作为入口文件提供给它，Parcel 通过查看脚本标签来确定它应该创建哪个 JavaScript 文件。

$ parcel index.html

Parcel 在读取 index.html 文件后知道它应该使用 index.js 作为入口点。但是 Webpack 4 不支持 HTML 文件作为入口点。

0 配置能得到什么

Parcel 和 webpack 的不同之处在于无需配置文件即可构建复杂的应用程序。

使用 webpack，在没有配置文件的情况下获得的唯一功能是默认输入和输出文件。 如果需要其他任何东西，比如 babel、SCSS 等，则需要依赖 webpack.config.js 文件。 创建 React 应用程序必须编写的配置与 webpack 3 非常相似。

对于大多数生产项目，当使用 webpack 4 时，仍然需要一个配置文件。Parcel 支持以下转换而无需 Parcel 配置文件：

• CSS
• SCSS
• Images
• Babel
• PostCSS
• PostHTML
• TypeScript
• ReasonML/BuckleScript
• ReasonReact

Parcel 通过检查安装了哪些依赖项以及存在哪些配置文件来自动检测需要哪些转换。例如，如果使用 babel，它会从 .babelrc 文件中自动读取配置。

4.示例项目

配置对比

用 CSS 文件和 JPEG 文件创建了一个简单的 React 项目：

index.html;
index.js;
styles.css;
background.jpeg;
package.json;

Parcel 无需配置即可构建此项目。 Webpack 需要一个包含 28 行代码的配置文件。

输出对比

Parcel 和 Webpack 在输出文件结构上存在差异。 Parcel 为 CSS、JavaScript 包、图像等创建单独的文件：

webpack 内联 JavaScript 包中的所有内容（当然可以配置）：

缓存

Parcel 使用缓存来加快构建速度。 第一次运行 Parcel 时，它会进行一些缓存，这使得下一次构建运行得更快， 缓存最适合中型及以上的应用程序。

webpack 4 也做了一些缓存，但还没有实现完整的缓存和并行性（这是 webpack 5 的一个里程碑）。

构建时间

Parcel 制定了对比 Parcel 和其他打包工具的基准。 Parcel 一直受到批评，因为没有将基准开源。 在不开源的情况下，人们无法验证基准是否真实。

因此，我为真实世界的 React 应用程序制作了自己的基准， 基准测试也是闭源的，但至少我是中立的。

运行基准测试的应用程序在 200 个 JS 文件中总共有 17k 行代码。

可以看到 Parcel 和 wepback 4 都比 webpack 3 快得多（快约 3 倍）。 还可以看到只有 Parcel 的缓存机制对项目有影响，第二次运行是 2 秒，比第一次运行快 4 倍！

代码拆分

代码拆分是一种通过将包拆分为更小的包来提高应用程序性能的方法。Parcel 声称支持开箱即用的零配置代码拆分。Webpack 支持根据文档进行代码拆分。

开发服务器

在本机开发时，当对代码进行更改时，希望更改尽快反映在浏览器中，而不想每次都进行完整的生产构建。

Parcel 和 webpack 都有一个开发服务器，可以在本地主机上开发时使用。webpack 要求配置一个 webpack-dev-server，而 Parcel 开箱即用地支持。

parcel index.html

包分析工具

Webpack 有许多包分析工具，可用于调试和优化包大小，比如：

• https://github.com/th0r/webpack-bundle-analyzer
• https://github.com/danvk/source-map-explorer

Parcel 也有捆绑分析工具。例如：

• https://github.com/gregtillbrook/parcel-plugin-bundle-visualiser

作者/社区

Webpack 有一个 5 人的核心团队，有一系列赞助商和支持者。 在 webpack 的生命周期中，有 415 位不同的贡献者。

Parcel 并没有像 webpack 那样清晰定义的核心团队。 赞助商和支持者的列表比 webpack 小得多，Parcel 共有 89 个贡献者。同时，webpack 和 Parcel 都有活跃的社区。

4.Parcel v2.9.0新特性

2023年5月26日，Parcel v2.9.0准时发布，带来了以下诸多新特性。

新的解析器

Parcel v2.9.0 包括一个用 Rust 从头开始 编写的全新解析器实现。

目前该解析器已经支持所有现有的 Parcel 解析功能，同时添加了对 package.json “exports” 和 “imports” 以及 tsconfig.json “baseUrl”、“paths” 和 “moduleSuffixes” 的支持。

ESM 插件和配置

除了对 CommonJS 的现有支持之外，Parcel 现在还支持作为原生 ES 模块编写的插件和配置文件。

这意味着插件可以使用 .mjs 格式发布到 npm，或者在它们的 package.json 中使用 "type": "module" 以在 .js 文件中启用 ESM 语法。现在还支持 postcss.config.mjs 等配置文件。

本地插件

在 Parcel v2.9.0 中，插件可以作为来自 .parcelrc 配置的相对路径被引用。不需要有自己的 package.json，可以直接引用一个 JavaScript 文件。

插件在进行更改时支持热加载，甚至不需要在开发时重新启动 Parcel。同时，Parcel 仍然鼓励开发者将插件发布到 npm。

SWC 压缩器

在 Parcel v2.9.0 中，默认的压缩器从 Terser 切换到 SWC。

SWC 压缩器比 Terser 快 7 倍左右，同时产生的输出体积更小。 SWC 也支持大多数 Terser 配置选项，因此如果配置了 .terserrc ，它依然可以继续工作。

增量符号传播

符号传播是一种算法，它遍历项目的完整依赖关系图，并确定每个模块的哪些导出被实际使用，哪些可以被 tree shaking 掉。在 Parcel v2.9.0 中，这个算法修改为增量的。

增量算法不会在每次进行更改时遍历整个图形，而是跟踪更改的文件中修改了哪些依赖项，并更新现有图形。

构建性能跟踪

Parcel 现在包含一个 --trace CLI 标志，它将跟踪在构建的每个阶段花费了多少时间、调用了哪些插件以及每个阶段花费了多长时间。

以 Chrome 跟踪格式输出数据，开发者可以将其加载到 Chrome 开发工具或其他更高级的分析工具（如 Perfetto）中。

5.本文总结

本文主要和大家介绍 Parcel ，即一个零配置构建工具。它比其他 JavaScript 转换器快100倍！文章从Parcel是什么？Parcel有哪些特性？Parcel和Webpack 4.0比较等诸多维度展开。因为篇幅有限，文章并没有过多展开，如果有兴趣，文末的参考资料提供了大量优秀文档以供学习。

参考资料

https://blog.jakoblind.no/parcel-webpack/

https://parceljs.org/

https://vitejs.dev/guide/features.html#vue