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 用於生成環境，相信我你一定會踩很多坑。
踩坑不要緊，要命的是無法在網上找到解決方法以快速解決問題。你覺得呢？