一个比 webpack 快10倍的打包工具

分手后的思念是犯贱 2022-05-31 06:38 196阅读 0赞

作为奇舞团的一个小小程序媛，每天都在不断地接受新知识，PostCSS刚学完，PostHTML又出来了。刚研究明白Rollup的配置，又有一个横空出世的打包工具——Parceljs。

我本来是拒绝的，毕竟在这个充满诱惑的年代，我要维持自己内心的纯洁，但当我打开Parcel的官网，看到下面的benchmark数据，我就不淡定了。

[![642][]][642]

居然带缓存的时候比webpack快10倍！！！

[![0][]][0]

虽然是官方给出的单例测试，但是在4个CPU的2016年MPB，拥有1726个模块， 6.5M的未压缩文件的app上跑出这个成绩，简直是令人心动不已！

虽然“又小又快又容易”在自然界中某些场合下并不见得是什么好事，但是在如今的前端领域，这个词简直是对这种解放人类天性的打包产品最好的褒奖！

parcel可以说是将懒贯彻到极致。一个月前，我由于无法忍受（实际上是因为看不懂记不住）webpack繁复的配置，而拥抱了Rollupjs，然后看到了Parcel之后，估计我又该”移情别恋“了！

[![1][]][1]

据官方介绍，Parceljs拥有这样超快打包速度的原因得益于它开启了多进程打包，并使用文件系统缓存机制，从而提升了重启后重打包的速度。

## 开始入手 ##

对于parcel，入手过程堪称傻瓜式~

可以使用 Yarn 或者 npm进行安装，对于我们这些年轻的FEer，当然是选择npm了

JavaScript

下面就可以开始尝试文件打包了.

Parcel与众不同的一点是，它可以使用任何类型的文件作为入口文件，但是官方推荐是用HTML文件或者是JavaScript文件，如果你在HTML文件中引入了一个相对地址的JavaScript文件，Parcel也会自动给将相对于HTML的地址替换为相对于输出文件的地址，真是超级贴心！

JavaScript

<table style="margin-left:0px;font-size:13px;border:none;margin-top:0px;margin-right:0px;margin-bottom:0px;padding:0px;border-spacing:0px;width:auto;background:none;table-layout:auto;"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;"> 
   <td style="font-size:13px;text-align:center;background-image:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;background-color:rgb(238,238,238);"> 
    <div style="border:none;margin:0px;padding-right:0px;padding-left:0px;background:none;text-align:left;white-space:nowrap;padding-top:5px;padding-bottom:3px;line-height:15px;"> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       1 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       2 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       3 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       4 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       5 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       6 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       7 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       8 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       9 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       10 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       11 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       12 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       13 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       14 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       15 
     </div> 
    </div></td> 
   <td style="font-size:13px;text-align:center;width:581px;background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;"> 
    <div style="margin:0px;padding-right:0px;padding-left:0px;text-align:left;color:rgb(0,0,0);white-space:pre;border:none;padding-top:5px;padding-bottom:3px;background:none;line-height:15px;"> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">// index.html文件</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;">
       &nbsp; 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&lt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">html</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&gt;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;">
       &nbsp; 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&lt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">body</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&gt;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;">
       &nbsp; 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(255,0,0);">&lt;script </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">src</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(221,17,68);">"./index.js"</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&gt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(255,0,0);">&lt;/script&gt;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;">
       &nbsp; 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&lt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">/</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">body</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&gt;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;">
       &nbsp; 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&lt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">/</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">html</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&gt;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;">
       &nbsp; 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">// index.js 文件</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;">
       &nbsp; 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">console</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">log</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(221,17,68);">"hello world"</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

如果你的项目没有自己的服务端，感谢Parcel有一个内置的Dev Server

[642]: /images/20220531/9f5593d4c53c458ebc810c07a0b57d1e.png
[0]: /images/20220531/3cb5983342104f2ab9592fa7688276ea.png
[1]: /images/20220531/7394f400ffb0420cbc8fe8887b835246.png