Parcel v2.8.0
我們很高興宣佈 Parcel v2.8.0 發布！此版本包含一個全新的套件演算法，具備進階的自動程式碼分割、大幅提升大型專案的建置效能，並修正許多錯誤。它也包含 HMR 更新的主要效能提升，以及我們已看到可將套件大小減少多達 50% 的樹狀搖晃變更。
新的套件演算法
#自我們最初的 v2 版本以來，Parcel 已支援自動程式碼分割，它會在應用程式多個部分（例如頁面、動態匯入等）之間重複共享模組。這允許像 React 或設計系統等常用依賴項獨立於應用程式程式碼快取，減少在頁面之間導航時必須載入的程式碼量。由於它是自動的，因此開發人員不需要手動設定或更新，讓您的應用程式在您進行變更時保持最佳化。
我們的初始實作對於中小型專案運作良好，但在大型專案上遇到可擴充性問題。此演算法涉及許多巢狀圖形遍歷（二次時間複雜度），而且經常會執行稍後會復原的工作。此外，實作有點錯誤，有時會導致不必要的重複，甚至遺漏模組。
Atlassian 團隊貢獻了一種新的綑綁演算法，解決了這些問題，大幅改善了建置時間和執行時期效能。它採用與先前實作不同的方法：它並非一開始就根據手動程式碼分割點（例如動態匯入）將所有資產放入綑綁中，然後再移除重複部分，而是從不含重複部分的圖形開始（每個資產只在一個綑綁中）。然後，它會根據需要合併綑綁，以符合並行要求限制和最小綑綁大小需求等限制。它也透過預先計算更多資訊和移除巢狀圖形遍歷來降低時間複雜度。
這會產生較小的綑綁和更快速的建置。對於一個超過 60,000 個資產的非常大型實際專案，整體建置時間從超過 25 分鐘縮短至 9 分鐘（快了 2.7 倍）。整個專案的總綑綁大小從 952 MB 縮小至 370 MB（小了 2.5 倍）。相較之下，使用 webpack 建置相同的應用程式需要超過 45 分鐘。
我們已經針對這個新的綑綁演算法進行了長時間的研究，我們很興奮終於能讓它成為此版本的預設值。非常感謝 Atlassian 團隊貢獻了這項改善！
HMR 重新建置效能
#除了改善綑綁效能之外，我們也致力於讓增量重新建置和 HMR 更新更快速。此版本包含了此領域的三項新功能：增量綑綁、單執行緒編譯和更早的 HMR 更新。
有些工具會完全避免在開發中進行綑綁，而是利用瀏覽器中的 ESM 個別載入每個模組。這表示當檔案變更時，只需要轉換該檔案，而不是重新計算整個綑綁。然而，對於包含許多模組的大型專案，這種方法表示瀏覽器必須在載入頁面時發出數百甚至數千個串聯 HTTP 要求。此外，在執行 HMR 更新時，瀏覽器必須發出網路要求來重新載入每個已更新的檔案。相依的模組也必須手動更新，因為無法在 ESM 模組註冊中取消模組的效度。
包裹已經有一個開發專用的封裝器，其工作量遠低於生產環境封裝器（例如，沒有樹狀搖晃），但對於大型應用程式，上述的綑綁演算法仍然可能成為瓶頸。然而，大多數程式碼變更都相當簡單，它們只會影響單一檔案，而不會新增或移除任何依賴關係。在這些情況下，重新綑綁是不必要的，而 Parcel 現在可以簡單地更新原地的資產，而無需重新執行整個綑綁演算法。此外，當只有一個檔案變更時，Parcel 現在會在主執行緒上編譯和封裝，以避免序列化綑綁圖形傳送給工作人員的成本。
這種增量式綑綁可以產生巨大的差異，例如，上述大型專案的重新建置時間從 40 秒減少到 4 秒（快了 10 倍）！
此外，Parcel 現在會在封裝綑綁完成之前，透過 WebSocket 將 HMR 更新傳送至瀏覽器。我們的自訂開發專用模組格式使我們能夠重新評估已變更的模組，並在不需要額外網路要求的情況下將它們交換到位。這實際上表示 HMR 更新所需的作業量與未綑綁時相同，會隨著變更的大小調整，而不是專案的大小，並在頁面載入期間避免網路瀑布。
我們一直在對我們的端對端 HMR 更新效能進行基準測試，並與其他工具進行比較。以下結果顯示了對於一個有 1000 個元件的 React 應用程式，從儲存檔案到在瀏覽器中看到更新所需的時間
| Vite | Turbopack | Parcel | |
|---|---|---|---|
| Root | 293.5ms | 274.8ms | 88.6ms |
| Leaf | 143.8ms | 57ms | 37.4ms |
- 在更新 root 元件方面，Parcel 比 Turbopack 快 68%，比 Vite 快 70%。
- 在更新 leaf 元件方面，Parcel 比 Turbopack 快 34%，比 Vite 快 74%。
請參閱 此儲存庫 以取得完整的基準測試原始碼和結果。
樹狀搖晃改進
#此版本也包含透過程式碼分割改進樹狀搖晃。先前，如果您使用包含許多重新導出的索引檔案的大型程式庫，Parcel 會始終將所有已使用的導出內容置於同一個套件中。例如，如果您在不同的頁面或程式碼分割點（例如動態匯入）中使用組件程式庫的不同組件，整個專案中所有已使用的組件都將置於進入套件中。這表示在初始頁面載入時可能會載入比必要更多的 JavaScript。
Parcel 現在會改寫相依性，指向其最終目的地，並沿途遵循找到的所有重新導出。這表示 無副作用套件 中的重新導出現在不會對程式碼分割造成影響，而且只會載入每個套件中已使用的導出內容。在許多應用程式中，這表示進入套件會變得更小，因為更多程式碼只會在需要時載入。
結果將取決於您依賴多少重新導出以及您的程式碼分割設定，但到目前為止，我們已在幾個應用程式中看到一些令人印象深刻的改進。一個非常大的應用程式看到 JS 進入套件縮小了 40% 以上，而另一個應用程式則看到 JS 進入套件縮小了 25%，CSS 縮小了 50%。
感謝 Niklas Mischkulnig 貢獻此改進！
謝謝！
#Parcel v2.8.0 包含其他幾個較小的功能、錯誤修正和改進。請查看完整的 版本說明 以取得更多詳細資料。