一個比 webpack 快10倍的打包工具
阿新 • • 發佈：2019-01-05
作為奇舞團的一個小小程式媛，每天都在不斷地接受新知識，PostCSS剛學完，PostHTML又出來了。剛研究明白Rollup的配置，又有一個橫空出世的打包工具——Parceljs。
我本來是拒絕的，畢竟在這個充滿誘惑的年代，我要維持自己內心的純潔，但當我開啟Parcel的官網，看到下面的benchmark資料，我就不淡定了。
居然帶快取的時候比webpack快10倍！！！
雖然是官方給出的單例測試，但是在4個CPU的2016年MPB，擁有1726個模組， 6.5M的未壓縮檔案的app上跑出這個成績，簡直是令人心動不已！
雖然“又小又快又容易”在自然界中某些場合下並不見得是什麼好事，但是在如今的前端領域，這個詞簡直是對這種解放人類天性的打包產品最好的褒獎！
parcel可以說是將懶貫徹到極致。一個月前，我由於無法忍受（實際上是因為看不懂記不住）webpack繁複的配置，而擁抱了Rollupjs，然後看到了Parcel之後，估計我又該”移情別戀“了！
據官方介紹，Parceljs擁有這樣超快打包速度的原因得益於它開啟了多程序打包，並使用檔案系統快取機制，從而提升了重啟後重打包的速度。
開始入手
對於parcel，入手過程堪稱傻瓜式~
可以使用 Yarn 或者 npm進行安裝，對於我們這些年輕的FEer，當然是選擇npm了
JavaScript| 123 | // 全域性安裝 parcel$npm install-gparcel-bundler |
下面就可以開始嘗試檔案打包了.
Parcel與眾不同的一點是，它可以使用任何型別的檔案作為入口檔案，但是官方推薦是用HTML檔案或者是JavaScript檔案，如果你在HTML檔案中引入了一個相對地址的JavaScript檔案，Parcel也會自動給將相對於HTML的地址替換為相對於輸出檔案的地址，真是超級貼心！
JavaScript| 123456789101112131415 | // index.html檔案<html><body><script src="./index.js"></script></body></html>// index.js 檔案console.log( |
如果你的專案沒有自己的服務端，感謝Parcel有一個內建的Dev Server