Parcel v2.9.0
Parcel v2.9.0 包含許多長期請求的功能,包括一個全新的解析器,支援 package.json「exports」和 tsconfig.json 功能,支援 ESM 外掛程式和設定檔,以及本機 Parcel 外掛程式。它還透過由 SWC 提供支援的新預設 JS 壓縮器、增量符號傳播和改善的打包器資料結構來提升效能,並包含新的建置效能追蹤功能。這是一個重大版本 – 讓我們深入探討!
新的解析器
#Parcel 的解析器負責尋找依賴項的檔案路徑,例如 import "react"
。這看起來很簡單,但隨著 JavaScript 生態系統在這些年來的發展,它變得越來越複雜。Parcel 目前的解析器實作最初寫於 2018 年,而且缺少一些現代功能,例如 package.json「exports」和「imports」。
Parcel v2.9.0 包含一個全新的解析器實作,從頭開始以 Rust 編寫。它支援所有現有的 Parcel 解析功能,同時新增對 package.json「exports」和「imports」,以及 tsconfig.json「baseUrl」、「paths」和「moduleSuffixes」的支援。
很遺憾的是,啟用對 package.json「exports」的支持會造成重大變更。當一個套件宣告「exports」時,使用者將無法再匯入未匯出的檔案。此外,由於「import」和「require」等 exports 條件,可能會發生雙重套件風險。基於這些原因,目前 exports 支援為選用功能,必須在專案中明確啟用。這可透過將以下內容新增到專案根目錄的 package.json 來完成
{
"@parcel/resolver-default": {
"packageExports": true
}
}
查看package.json exports和tsconfig.json的說明文件,以進一步瞭解新功能!
ESM 外掛程式和設定檔
#除了現有的 CommonJS 支援之外,Parcel 現在也支援以原生 ES 模組撰寫的外掛程式和設定檔。這表示外掛程式可以使用 .mjs
格式發佈到 npm,或在其 package.json 中使用 "type": "module"
來在 .js
檔案中啟用 ESM 語法。現在也支援設定檔,例如 postcss.config.mjs
。
這項功能的實作出乎意料地困難,這也是我們花了這麼久的時間才完成的原因。Parcel 支援對其執行的所有動作進行細緻快取,以提升開發效能。為了達到此目的,它需要追蹤所有與您的建置相關的檔案。這包括所有開發相關相依性,例如外掛程式、編譯器和影響輸出的設定檔。如果其中任何一個變更,Parcel 只會重新編譯必要的檔案。
在內部,這仰賴修正 Node 的 require
實作,以便我們追蹤所有載入的開發相關相依性。但這只適用於 CommonJS 模組。對於原生 ESM,目前沒有穩定的方式可以觸及 Node 中的模組載入器,這表示我們無法追蹤匯入了哪些檔案。
為了追蹤 ESM 依賴項,Parcel 現在使用優秀的 es-module-lexer 專案的分支,它是一個用 C 編寫的極快速解析器,特別設計用來分析 ES 模組的匯入和匯出語法。我們已將它與一個 Rust 函式庫整合,它使用我們新的解析器實作來解析這些依賴項,並收集 ESM 外掛程式或設定檔所使用的所有檔案。這讓我們可以在這些依賴項之一變更時使快取失效。
我們盡力以靜態方式分析盡可能多的內容,但有些語法,例如 import(someVariable)
,不受支援,而且會導致快取在每次建置時失效。在這些情況下,您會看到警告。
ESM 支援是此版本中的實驗性功能。如果您有任何意見回饋,請在 Github 上開啟問題或討論。
本機外掛程式
#過去,Parcel v2 外掛程式必須是 npm 套件。如果您使用的是單一存放庫,則專案中的本機外掛程式是可行的,但我們始終建議將外掛程式發佈到 npm 或內部公司註冊表,以便其他人可以重複使用。然而,我們聽到了意見回饋,表示這讓非單一存放庫設定的專案更難建置和建置外掛程式的原型。
在 Parcel v2.9.0 中,外掛程式可以從您的 .parcelrc
設定檔中作為相對路徑來參考。它們不需要有自己的 package.json – 您可以直接參考 JavaScript 檔案。當您進行變更時,外掛程式會熱更新,因此您甚至不需要在開發時重新啟動 Parcel。雖然我們仍然建議將外掛程式發佈到 npm,但這應讓建置新外掛程式的原型變得更簡單。
您可以在 文件 中瞭解更多關於本機外掛程式。
SWC 壓縮器
#Parcel 是最早轉換為 SWC JavaScript 編譯器的工具之一,它幫助我們在 2021 年將效能提升 10 倍。在 Parcel v2.9.0 中,我們也將預設壓縮器從 Terser 轉換為 SWC。
SWC 壓縮器比 Terser 快約 7 倍,同時產生可比甚至更小的輸出大小。SWC 也支援大多數 Terser 組態選項,因此如果您有 .terserrc
,它應該可以繼續運作。
非常感謝 SWC 團隊為整個生態系統改善壓縮效能所做的出色工作!
增量符號傳播
#從一開始,Parcel 的主要目標之一就是根據變更的大小,而不是整個專案的大小來擴充重建。這表示無論您的專案是 1 個檔案或 100,000 個檔案,重建都應該很快。這就是為什麼我們從 2017 年的第一個版本開始實作細粒度快取,以及為什麼我們持續推出新功能,例如 增量套件。
符號傳播是一種演算法,它會遍歷專案的完整依賴關係圖,並判斷每個模組的哪些輸出實際上被使用,以及哪些輸出可以透過 tree shaking 移除。在 Parcel v2.9.0 中,此演算法現在是增量的。它不會在您每次進行變更時都遍歷完整圖形,而是追蹤您變更的檔案中有哪些依賴關係已被修改,並在原處精確更新現有圖形。對於非常大的專案,這有助於大幅減少每次儲存檔案時需要執行的作業量。
符號傳播現在也會在開發中執行,而不再只在生產版本中執行。這讓我們可以在開發期間,當您嘗試匯入未從模組匯出的內容時,發出適當的錯誤,這在除錯時可能會有幫助。
建立效能追蹤
#Parcel 現在包含一個 --trace
CLI 旗標,它會追蹤在建立的每個階段花費多少時間、呼叫了哪些外掛程式,以及每個階段花費多少時間。Parcel 追蹤可以協助你最佳化建立,方法是回答問題,例如「哪個外掛程式在我的建立過程中花費最多時間?」或「我的專案中哪個檔案轉換花費最長時間?」。
Parcel 已經支援 --profile
旗標一段時間,它會執行 V8 的抽樣 CPU 分析器。--trace
的層級高出許多,讓你在外掛程式層級而不是函式層級更輕鬆地查看效能資料。兩個都以 Chrome 追蹤格式輸出資料,你可以將資料載入 Chrome Dev Tools 或其他更進階的分析工具,例如 Perfetto。在那裡你可以針對資料執行 SQL 查詢,以回答上面列出的問題。
查看 文件 以進一步了解。
還有更多!
#除了上述主要功能外,此版本還有許多更小的功能和錯誤修正。查看 完整版本說明 以取得詳細資料。
感謝所有為此版本做出貢獻的人!