下一代前端打包工具 Parcel介紹

2021-08-13 04:39:38 字數 1310 閱讀 7849

基於乙個合理大小的應用程式,包含1726個模組,未壓縮有6.5m 。構建在2023年的macbook pro,4核物理cpu。

| 打包工具 | 時間 |

| browserify       | 22.98s |

| webpack           | 20.71s |

|parcel|9.98s|

|parcel - with cache|2.64s|

目前已經有很多的打包工具了,包括webpack和browserify。那麼為什麼我們還需要另外乙個呢?主要原因是因為開發者的經驗。

許多的打包工具都是圍繞著配置和外掛程式構建的,而且為了讓應用正常的工作,超過500行的配置並不罕見。這些配置不僅繁瑣而且耗時。通常情況下,這可能導致次優化的應用傳送到生產環境。parcel被設計成零配置的:只需要將它指向應用程式的入口點,它就能正常工作。

目前現存的打包工具都非常慢。擁有大量檔案和依賴的大型應用可能需要花費幾分鐘的時間來構建,這在開發過程中隨著時間的變化而變得尤為痛苦。監聽檔案變更能夠幫助重新構建,但初始的啟動仍然非常慢。parcel利用工作執行緒編譯你的**,利用現代的多核處理器能力。這導致了初始構建的速度大大提公升。它還具有乙個檔案系統快取,可以儲存每乙個檔案的編譯結果,以便後續能夠更快的啟動。

最後,現有的打包工具都是圍繞字串載入/轉換構建的,其中轉換需要乙個字串,解析它,進行一些轉換,然後再次生成**。通常這樣會導致許多的解析和**生成在單個檔案上執行,這是非常低效的。相反,parcel的轉換工作在ast上,因此每個檔案只有乙個解析,多個轉換以及乙個**生成。

parcel將資源樹轉換為bundle樹。許多其它的打包工具基本上都是基於js資源,其它格式都是貼上的-例如,預設情況下以字串的形式內嵌到js中。parcel是檔案型別無關的-它可以按照你期望的方式與任何型別的資源一起工作,無需配置。

parcel將乙個入口點作為輸入,可以是任何型別的:js檔案,html,css,等。在parcel中定義了各種資源型別,它們知道如何處理特定的資源型別。資源檔案被解析,它的依賴關係被提取,並轉換成最終的編譯形式。這建立了乙個資源樹。

一旦資源樹被構建,資源就被放入乙個bundle樹中。為入口資源建立乙個bundle,並為動態匯入的資源建立子bundle,這回導致**拆分的發生。當匯入不同型別的資源的時候就會建立子bundle,例如如果你在js中匯入css檔案,它就會打包成對應js的兄弟bundle。如果乙個資源需要多個bundle,它會被打包到最近的共同祖先,因此它不會被包含多次。

在構建bundle樹之後,每乙個包都有特定的檔案型別的包裝器寫入檔案。

XR,下一代搜尋

我們未來會陸續推出一系列文章,而本篇則是開宗明義的第一章,希望能藉此機會和更多開發者互相交流對搜尋 xr的理解,以及對其未來發展的看法 xr,下一代網際網路 我們認為,xr是下一代網際網路的核心要素,也是手機之後的下一代終端裝置,原因有以下兩點 首先,ar vr更符合人類的認知方式,因為我們每個人都...

XR,下一代搜尋

我們未來會陸續推出一系列文章,而本篇則是開宗明義的第一章,希望能藉此機會和更多開發者互相交流對搜尋 xr的理解,以及對其未來發展的看法 xr,下一代網際網路 我們認為,xr是下一代網際網路的核心要素,也是手機之後的下一代終端裝置,原因有以下兩點 首先,ar vr更符合人類的認知方式,因為我們每個人都...

Polymer Google的下一代Web UI庫

由原palm webos開發enyo框架的團隊加盟google後打造。基於shadow dom,custom elements,mdv等最新瀏覽器特性,支援web components,代表了下一代web框架的方向 一切皆元件,儘量減少 量,儘量減少框架限制。當然,這也意味著google現在有三個相...