Parcel 2 beta 1

📦 Parcel 2 beta 1 - 提升穩定性、tree shaking、原始碼對應效能,還有更多功能!🚀

Parcel 團隊今天非常興奮地宣布推出 Parcel 2 的第一個 beta 版本!這是第一個比我們的 nightly 和 alpha 版本更穩定的 Parcel 2 版本,我們承諾避免變更大部分使用者介面 API。請試用並在 GitHub 上提供您的意見回饋!

距離我們上次的 alpha 版本已經有一段時間了,這段期間 Parcel 2 有許多積極的開發。在準備我們的穩定 v2 版本時,我們一直專注於穩定性效能可靠性,但我們也設法加入了一些新功能!

Tree shaking

#

建置生產 JavaScript 編譯器極具挑戰性。我們從 2018 年 開始處理 Parcel 的 tree shaking 實作,從那時起它有了極大的進步。Parcel 2 預設啟用 tree shaking,我們最近使用它在 Atlassian 和 Adobe 部署一些非常大的應用程式。

Parcel 的 tree shaking 實作在打包工具中獨樹一格。除了支援 ES 模組(許多其他工具也有支援)之外,Parcel 也原生支援 tree shaking CommonJS。雖然有些函式庫現在提供 ES 模組,但 npm 上大部分的程式碼在發佈前仍以 CommonJS 編寫或轉譯。CommonJS 很難像 JavaScript 的大部分程式碼一樣進行靜態分析,我們已經投入大量心力讓這項工作變得透明。我們可以在大部分情況下進行靜態分析,並在執行不安全操作時自動放棄並將模組包裝在函式中。在過去幾個月,我們已發現並修正了 tree shaking 實作中的許多錯誤和臨界狀況,並廣泛地進行了測試。我們很樂意聽聽它在您的應用程式中運作的狀況!請 回報您發現的任何錯誤

Parcel 現在也為 tree shaking 的程式包產生原始碼對應表。這是自 tree shaking 初始版本以來的一個限制,也是我們面臨的一項重大挑戰。由於 tree shaking 沒有單純地將檔案線性串接在一起,因此很難正確地合併原始碼對應表。取而代之的是,我們現在將 AST 儲存在我們的快取中,並將它們合併在一起。這會保留位置資訊作為 AST 節點的一部分,可於最後作為程式碼產生的一部分用來產生最終的原始碼對應表。

除了原始碼對應表之外,位置資訊也讓我們能夠提供更精確的錯誤訊息。我們現在能夠顯示詳細的程式碼框架,以供錯誤使用,例如從模組匯入不存在的匯出等。

非常感謝 Niklas Mischkulnig 在 Parcel 中改善 tree shaking 編譯器的所有工作。🙏

原始碼對應表

#

產生原始碼對應表可能會相當耗費 CPU 和記憶體,特別是在合併來自許多檔案的原始碼對應表時。我們之前使用 Mozilla source-map 函式庫來執行這項工作,但在大型程式包上遇到了效能問題。

為了解決這個問題,我們實作了自己的函式庫來結合和操作原始碼對應。這是一個以 C++ 編寫的原生節點模組,專門為 Parcel 的使用案例而建置。它使用FlatBuffers在工作人員和快取之間進行序列化,這大幅降低了我們先前使用 JSON 時產生和解析的成本。總體而言,它比 JavaScript 實作結合原始碼對應的速度快約 20 倍。舉例來說,先前需要 3 秒鐘才能產生原始碼對應的套件現在只需 175 毫秒!

除了原生節點模組之外,還有相同函式庫的 Web Assembly 建置,這允許在網路瀏覽器等環境中使用它。雖然速度不如原生繫結,但令人興奮的是,相同的程式碼可以重複使用,而不需要維護純 JS 實作。

感謝Jasper De Moor在 Parcel 中為原始碼對應所做的所有驚人工作!🥳

內容雜湊

#

v1.7.0以來,我們透過內容雜湊檔案名稱在 Parcel 中支援長期快取。這些內容雜湊歷來都是透過雜湊套件中包含的每個個別檔案而產生的。這確保了套件中任何檔案的變更都會導致檔案名稱更新,並使瀏覽器和 CDN 快取失效。但是,它並未考量到 Parcel 執行時期程式碼本身變更,而不是原始碼的情況。這可能發生在升級 Parcel 版本或稍後執行的外掛程式(例如縮小程式)時。

在所有封裝和縮小作業完成後,Parcel 現在會根據套件的最終內容產生雜湊。這表示即使 Parcel 注入的執行時期程式碼變更,或您的縮小程式變更了編譯程式碼的方式,內容雜湊現在也會正確更新。

這項實作是一項挑戰,因為套件可能會在程式碼中參照其他套件。由於最終名稱在產生程式碼後才會得知,因此 Parcel 現在會將佔位符參照插入套件內容,而不是最終套件名稱。最後,這些佔位符會在寫入磁碟時替換為最終名稱。

除了更可靠的內容雜湊外,Parcel 現在在許多情況下避免了連鎖失效問題。此問題在上述部落格文章中有詳細說明,但基本上,由於套件可能會透過內容雜湊檔案名稱參照其他套件,因此當葉子套件更新時,所有導致該套件的套件也必須更新才能清除快取。這會導致快取效能不佳。

Parcel 現在不再直接透過完整內容雜湊名稱參照套件,而是會在每個入口套件中包含一個清單。此清單包含一個穩定套件 ID 對應到最終內容雜湊檔名的對應。只會包含套件 ID,而不是直接參照其他套件。當樹狀結構中較底層的套件更新時,由於套件 ID 是穩定的,因此失效不再需要連鎖到中間套件。只需要更新入口套件(包含清單)和已變更的套件。這可以大幅改善快取命中率。

感謝Maia TeegardenWill Binns-Smith在 Parcel 2 中對內容雜湊所做的努力!

解析器診斷

#

當 Parcel 找不到您參照的模組時,現在會包含更完善的錯誤回報。這包括一個程式碼框架堆疊,顯示錯誤發生確切的位置,以及導致問題的任何中間檔案。

例如,以下螢幕截圖顯示一個錯誤,通常只會包含第一行(無法從「./src/index.js」解析「invalid-entries」),如果您幸運的話,可能會包含第一個程式碼框架。但是,這不會告訴您錯誤實際發生在哪裡。在這種情況下,invalid-entries 模組確實存在,但它指向其 package.json 中不存在的檔案。Parcel 現在會為 package.json 顯示第二個程式碼框架,指向導致基本問題的確切行。

升級

#

從 Parcel 2 的先前 alpha 版本升級應該是相當直接的,但有幾件事需要注意。

文件

#

我們已經為 Parcel 2 構建了一個 新的文件網站!它仍然是一個進行中的工作,但我們計畫涵蓋所有內容,從使用 Parcel 構建基本應用程式或函式庫開始,到更進階的功能、範例和構建您自己的外掛程式。請查看並給我們您的意見回饋!

穩定性

#

如前所述,這是 Parcel 2 的第一個測試版。這表示它比夜間版或 alpha 版更穩定,但在完全穩定的版本發布之前,仍預期會有一些變更。特別是,測試版表示我們不計畫變更大多數使用者介面 API,例如組態格式(在 package.json 和 .parcelrc 中)和 CLI 引數。預計在第一個候選版本之前,外掛程式 API 仍會有一些變更,不過我們預期此時不會有重大變更。

試試看!

#

如果您一直在等待嘗試 Parcel 2,現在正是時候!您可以透過執行 yarn add parcel@next 來安裝它。如果您需要協助,您可以在 GitHub 討論區 中提問,如果您遇到錯誤,請在 GitHub 問題 中回報。您也可以在 Twitter 上找到我 @devongovett。我們非常期待聽到您的意見回饋!