Parcel打包探讨

Parcel探讨

卖点：

1.极速打包时间

Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存，即使在重启构建后也能快速再编译。

2.打包所有的资源

Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持，而且不需要插件。

3.自动转换

在需要时，代码使用 Babel，PostCSS 和 PostHTML 自动转换

4. 零配置代码分拆

使用动态 import() 语法, Parcel 将你的输出文件束(bundles)分拆，因此你只需要在初次加载时加载你所需要的代码。这允许你将应用程序的代码拆分成单独的包，以便这些包可以按需加载，这意味着更小的初始包大小和更短的加载时间。随着用户在应用程序中浏览相应的模块需要加载，Parcel 会自动负责按需加载子包

 
 
import('./pages/about').then(function (page) {
  // 渲染页面
  page.default();
});

5.热模块替换

Parcel 无需配置，在开发环境的时候会自动在浏览器内随着你的代码更改而去更新模块

6.友好的错误日志

当遇到错误时，Parcel 会输出 语法高亮的代码片段，帮助你定位问题

Hello World

从你应用的入口 HTML 文件开始。Parcel 跟随着文件的依赖去构建你的整个应用 

只需要运行 parcel index.html[安装parcel,npm install -g parcel-bundler] 去启动一个开发服务器。引入 JavaScript, CSS, images, 和更多的资源，然后便大功告成！ ?

DEMO

1:parceljs_react 
2:webpack_react

比较基准

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

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

如何运作

1、构建资源树

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

2、构建文件束（Bundle）树

一旦资源树被构建好，资源会被放置在文件束树中。首先一个入口资源会被创建成一个文件束，然后动态的 import() 会被创建成子文件束 ，这引发了代码的拆分。 
当不同类型的文件资源被引入，兄弟文件束就会被创建。例如你在 JavaScript 中引入了 CSS 文件，那它会被放置在一个与 JavaScript 文件对应的兄弟文件束中。 
如果资源被多于一个文件束引用，它会被提升到文件束树中最近的公共祖先中，这样该资源就不会被多次打包。

3、打包

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

4、对比 
Webpack 打包时间 = parse string * n + transform * n + parse to AST + compress

parcel 打包时间 = parse to AST + transform * n + compress （加持多核心、多进程、缓存）

Parcel 还需要时间去打磨

• 不支持 SourceMap ：在开发模式下，Parcel 也不会输出 SourceMap，目前只能去调试可读性极低的代码；issue中 提到sourcemap太慢 所以暂时也没支持
• 打包后的资源体积大于传统打包工具
• 不支持剔除无效代码 ( TreeShaking )：很多时候我们只用到了库中的一个函数，结果 Parcel 把整个库都打包了进来
• • 一些依赖会 让Parcel 出错：当你的项目依赖了一些 Npm 上的模块时，有些 Npm 模块会让 Parcel 运行错误；

  小结

  现阶段的 Parcel 看上去很美好但还不能用于生成环境，如果你现在就把 Parcel 用于生成环境，相信我你一定会踩很多坑。 
  踩坑不要紧，要命的是无法在网上找到解决方法以快速解决问题。

  你觉得呢？