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 — 自上次 alpha 版本以來,Parcel 的 tree shaking 實作已大幅改善。除了許多錯誤修正和效能改善之外,Parcel 2 現在會為 tree shaking 的套件產生原始碼對應,並在您參照未知符號時顯示友善的錯誤訊息。
-
🗺 更快速的原始碼對應產生— Parcel 現在有一個全新的原始碼對應模組,針對我們的特定使用案例進行調整。它使用 C++ 編寫以提升效能,而且在合併多個檔案的原始碼對應時快了約 20 倍!
-
#️⃣ 改善內容雜湊— Parcel 現在有更可靠的內容雜湊支援,以確保套件的長期快取能力。此外,Parcel 2 現在會避免連鎖失效,只會更新入口套件中的清單,而不是所有參考套件。
-
🚨 解析器診斷— Parcel 2 現在支援友善的錯誤訊息,當它無法在您的程式碼中找到您參考的模組時。這些訊息包括顯示錯誤發生位置的詳細程式碼框架,以及有關如何修正問題的建議。
-
📊 更準確的套件報告— Parcel 在生產建置結束時在您的 CLI 中產生的套件報告現在更準確。它們現在基於原始碼對應,並排除在 tree shaking 和縮小化過程中移除的程式碼,以獲得更準確的文件大小。
-
🐞 大量的錯誤修正和改進 — 此版本包含無數的錯誤修正和穩定性改進。團隊一直努力對照一些非常大的應用程式測試 Parcel 2,我們很興奮看到它如何為您運作。
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 Teegarden和Will Binns-Smith在 Parcel 2 中對內容雜湊所做的努力!
解析器診斷
#當 Parcel 找不到您參照的模組時,現在會包含更完善的錯誤回報。這包括一個程式碼框架堆疊,顯示錯誤發生確切的位置,以及導致問題的任何中間檔案。
例如,以下螢幕截圖顯示一個錯誤,通常只會包含第一行(無法從「./src/index.js」解析「invalid-entries」),如果您幸運的話,可能會包含第一個程式碼框架。但是,這不會告訴您錯誤實際發生在哪裡。在這種情況下,invalid-entries 模組確實存在,但它指向其 package.json 中不存在的檔案。Parcel 現在會為 package.json 顯示第二個程式碼框架,指向導致基本問題的確切行。
升級
#從 Parcel 2 的先前 alpha 版本升級應該是相當直接的,但有幾件事需要注意。
-
設定解析變更 — Parcel 現在只支援儲存庫根目錄中的單一 .parcelrc 設定檔。出於效能考量,不再支援子目錄中的其他設定檔。
-
設定變更 — 為了與其他外掛程式一致,.parcelrc 中的
transforms
已重新命名為transformers
。 -
目標解析變更 — 當指向檔案而不是套件目錄本身時,單一儲存庫中 package.json 檔案中定義的目標現在會從專案根目錄解析,而不是個別套件。這表示您可以指向多個套件中的檔案來建置單一目標,或指向套件本身來建置每個套件中定義的目標。請參閱 此處 和 此處 的說明以取得更多資訊。
-
Dist 目錄變更 — 預設情況下,Parcel 現在會在 servemode 中輸出到專案根目錄中的 dist 目錄,而不是快取中的隱藏目錄。這讓您可以在開發期間更輕鬆地檢查建置的檔案。您可以使用
--dist-dir
CLI 選項覆寫此設定。 -
外掛程式 API 變更 — 有幾項外掛程式 API 變更。請參閱下方連結的文件以取得更多詳細資訊。
文件
#我們已經為 Parcel 2 構建了一個 新的文件網站!它仍然是一個進行中的工作,但我們計畫涵蓋所有內容,從使用 Parcel 構建基本應用程式或函式庫開始,到更進階的功能、範例和構建您自己的外掛程式。請查看並給我們您的意見回饋!
穩定性
#如前所述,這是 Parcel 2 的第一個測試版。這表示它比夜間版或 alpha 版更穩定,但在完全穩定的版本發布之前,仍預期會有一些變更。特別是,測試版表示我們不計畫變更大多數使用者介面 API,例如組態格式(在 package.json 和 .parcelrc 中)和 CLI 引數。預計在第一個候選版本之前,外掛程式 API 仍會有一些變更,不過我們預期此時不會有重大變更。
試試看!
#如果您一直在等待嘗試 Parcel 2,現在正是時候!您可以透過執行 yarn add parcel@next 來安裝它。如果您需要協助,您可以在 GitHub 討論區 中提問,如果您遇到錯誤,請在 GitHub 問題 中回報。您也可以在 Twitter 上找到我 @devongovett。我們非常期待聽到您的意見回饋!