Parcel

Parcel 是一个高性能的打包器,与之前的产品不同,它不需要配置。以零配置方式在社区内流行了起来。其主要思想是你设置了一个 index.html,Parcel 将根据它开始捆绑过程。它支持开箱即用的热模块更换。

特性:

  • 极速打包Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存,即使在重启构建后也能快速再编译。
  • 将你所有的资源打包Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持,而且不需要插件。
  • 自动转换:如若有需要,Babel, PostCSS, 和 PostHTML 甚至 node_modules 包会被用于自动转换代码.
  • 零配置代码分拆:使用动态 import() 语法, Parcel 将你的输出文件束(bundles)分拆,因此你只需要在初次加载时加载你所需要的代码。
  • 热模块替换Parcel 无需配置,在开发环境的时候会自动在浏览器内随着你的代码更改而去更新模块。
  • 友好的错误日志:当遇到错误时,Parcel 会输出 语法高亮的代码片段,帮助你定位问题。

运作原理

Parcel 将 资源 树转换成 bundle 树。许多其它的打包工具基本上是基于 JavaScript 资源,还有附加在其上的其它格式的资源。例如,在 JS 文件中内联成字符串。 Parcel 是对文件类型无感知的,它能按你所期待的方式那样与任意类型的资源工作,且毋须配置。Parcel 的打包流程共有三个步骤。

构建资源树

Parcel 接受单个入口资源作为输入,可以是任意类型:一个 JS 文件、HTML、CSS 和图片等等。有许多不同的资源类型在 Parcel 中被定义,它知道如何去处理特定的文件类型。资源会被解析,资源的依赖会被提取,资源会被转换成最终编译好的形态。此过程创建了一个资源树。

构建 bundle 树

一旦资源树被构建好,资源会被放置在 bundle 树中。首先一个入口资源会被创建成一个 bundle,然后动态的 import() 会被创建成子 bundle ,这引发了代码的拆分。

当不同类型的文件资源被引入,兄弟 bundle 就会被创建。例如你在 JavaScript 中引入了 CSS 文件,那它会被放置在一个与 JavaScript 文件对应的兄弟 bundle 中。

如果资源被多于一个 bundle 引用,它会被提升到 bundle 树中最近的公共祖先中,这样该资源就不会被多次打包。

打包

bundle 树被构建之后,每个 bundle 都会被 packager 写到一个特定文件类型的文件中。packagers 知道如何从每个资源中将代码合并起来,生成到最终被浏览器加载的文件中。

参考资料