parcel快速,零配置的打包工具，据说Parcel比webpack快多倍

Parcel的特性

快速打包：Parcel 使用工作进程启用多核编译，并具有文件系统缓存，即使在重新启动后也可快速重新构建。

打包所有资源：Parcel 支持JS，css，html，文件资源等等 - 不需要安装任何插件。

自动转换：在需要时，代码使用 babel，PostCSS 和 PostHTML 自动转换 - 即使是 node_modules。

零配置代码拆分：Parcel 使用动态 import() 语法拆分您的输出包，所以只加载初始加载时所需的内容。

模块热替换：当你在开发过程中进行更改时，Parcel 会自动更新浏览器中的模块，不需要进行任何配置。

友好的错误记录：遇到错误时，Parcel 会以语法高亮的形式打印的代码帧，以帮助你查明问题。

速度比较

基于一个合理大小的应用程序，包含1726个模块，未压缩有6.5M 。构建在2016年的MAcBook Pro，4核物理CPU。

打包工具	时间
browserify	22.98s
webpack	20.71s
parcel	9.98s
parcel - with cache	2.64s

为什么需要Parcel？

目前已经有很多的打包工具了，包括webpack和browserify。那么为什么我们还需要另外一个呢？主要原因是因为开发者的经验。

许多的打包工具都是围绕着配置和插件构建的，而且为了让应用正常的工作，超过500行的配置并不罕见。这些配置不仅繁琐而且耗时。通常情况下，这可能导致次优化的应用发送到生产环境。parcel被设计成零配置的：只需要将它指向应用程序的入口点，它就能正常工作。

目前现存的打包工具都非常慢。拥有大量文件和依赖的大型应用可能需要花费几分钟的时间来构建，这在开发过程中随着时间的变化而变得尤为痛苦。监听文件变更能够帮助重新构建，但初始的启动仍然非常慢。parcel利用工作线程编译你的代码，利用现代的多核处理器能力。这导致了初始构建的速度大大提升。它还具有一个文件系统缓存，可以保存每一个文件的编译结果，以便后续能够更快的启动。

最后，现有的打包工具都是围绕字符串加载/转换构建的，其中转换需要一个字符串，解析它，进行一些转换，然后再次生成代码。通常这样会导致许多的解析和代码生成在单个文件上运行，这是非常低效的。相反，parcel的转换工作在AST上，因此每个文件只有一个解析，多个转换以及一个代码生成。

Parcel如何工作的？

parcel将资源树转换为bundle树。许多其它的打包工具基本上都是基于js资源，其它格式都是粘贴的-例如，默认情况下以字符串的形式内嵌到js中。parcel是文件类型无关的-它可以按照你期望的方式与任何类型的资源一起工作，无需配置。

parcel将一个入口点作为输入，可以是任何类型的：JS文件，HTML，CSS，图片等。在parcel中定义了各种资源类型，它们知道如何处理特定的资源类型。资源文件被解析，它的依赖关系被提取，并转换成最终的编译形式。这创建了一个资源树。

一旦资源树被构建，资源就被放入一个bundle树中。为入口资源创建一个bundle，并为动态导入的资源创建子bundle，这回导致代码拆分的发生。当导入不同类型的资源的时候就会创建子bundle，例如如果你在js中导入css文件，它就会打包成对应js的兄弟bundle。如果一个资源需要多个bundle，它会被打包到最近的共同祖先，因此它不会被包含多次。

在构建bundle树之后，每一个包都有特定的文件类型的包装器写入文件。

Hello World

从你的应用程序的入口 HTML 文件开始。Parcel 将从入口文件开始分析依赖关系来为你构建整个应用程序。

index.html

<html>
<body>
  <script src="./index.js"></script>
</body>
</html>

index.js

// 导入另一个组件
import main from './main';
main();

main.js

// 导入一个 CSS module
import classes from './main.css';
export default () => {
  console.log(classes.main);
};

main.css

.main {
  /* 引用一个 image 文件 */
  background: url('./images/background.png');
  color: red;
}

只需运行parcel index.html 来启动一个dev服务器。导入 JavaScript，CSS，images，和更多资源，即可轻松搞定！

Parcel的安装

Yarn:

yarn global add parcel-bundler

npm:

npm install -g parcel-bundler

使用以下命令在你的项目目录中创建一个 package.json 文件：

yarn init -y

npm init -y

具体操作请查考文档：http://www.css88.com/doc/parcel/asset_types.html

链接: https://fly63.com/article/detial/252