Chrome 與開放原始碼架構合作,攜手打造更美好的網路環境
Chrome 是積極參與網路架構生態系統的貢獻者,在 2019 年 Chrome 開發人員高峰會上也會分享我們過去一年來的成果。
歡迎繼續閱讀,回顧這場會議的其他細節和資源。
我們如何讓網路更臻完善?
Chrome 團隊全體成員的目標是打造更優質的網路環境。我們致力改善瀏覽器 API 和 V8 (Chrome 採用的核心 JavaScript 和 WebAssembly 引擎),讓開發人員獲得各種功能,協助他們打造優質網頁。我們也會以多種方式對開放原始碼工具做出貢獻,設法改善目前在實際工作環境中的網站。
大部分的網頁開發人員會盡可能使用開放原始碼工具,並且不想建構完全自訂的基礎架構。用戶端 JavaScript 架構和 UI 程式庫在開放原始碼的使用中佔有一大部分的比例。熱門用戶端架構和程式庫 React、Angular 和 Vue 上的資料顯示:
- MDN 的第一年度網路開發人員與設計師問卷調查中,72% 參與者至少會使用其中一種架構和程式庫。
- HTTP 封存區分析的前 500 萬個網址中超過 32 萬個網站,至少使用其中一種架構和程式庫。
- 按照花費時間分組時,前 100 大網址中的 30 個網址至少會使用其中一種架構和程式庫。(這項研究的依據為內部資料)。
這表示更優異的開放原始碼工具能夠直接改善網路環境,因此 Chrome 工程師已開始與外部架構和程式庫作者直接合作。
為網頁架構的貢獻
一般用於建構和建構網頁的架構分為兩類:
- UI 架構 (或一些程式庫,例如 Preact、React 或 Vue),可讓您控管應用程式的檢視層 (例如透過元件模型)。
- 網路架構 (例如 Next.js、Nutx.js 和 Gatsby) 提供端對端系統,內建特別明確的功能,例如伺服器端轉譯。這些架構通常會使用檢視區塊層的 UI 架構或程式庫。
開發人員可以選擇不使用架構,但只要結合檢視區塊層程式庫、路由器、樣式系統、伺服器轉譯器等,最終就能建立自己的架構類型。雖然大家明確認為,但網路架構預設會負責處理大部分的疑慮。
本文其他部分將重點介紹近期推出不同架構和工具的許多改善項目,包括 Chrome 團隊的貢獻。
Angular
對於此架構第 8 版,Angular 團隊已推出數個改善項目:
- 系統預設會差異載入,盡量減少新版瀏覽器不需要的 polyfill。
- 支援延遲載入路徑的標準動態匯入語法。
- 網路工作站支援:在與主執行緒不同的背景執行緒中執行作業。
- Ivy 是 Angular 的全新轉譯引擎,這個引擎提供更好的重新編譯效能,並減少套件大小。在現有專案的預覽模式中,
您可以在「Angular 8 版」進一步瞭解這些改善項目,Chrome 團隊也期待在明年與更多功能合作,隨著更多功能推出。
Next.js
Next.js 是使用 React 做為檢視區塊層的網路架構。除了許多開發人員預期從用戶端架構獲得的 UI 元件模型外,Next.js 還提供一些內建預設功能:
- 使用預設程式碼分割功能轉送
- 編譯與套裝組合 (使用 Babel 和 webpack)
- 伺服器端算繪
- 在每個網頁層級擷取資料的機制
- 封裝樣式 (使用 styled-jsx)
Next.js 以縮減套件大小進行最佳化,而 Chrome 團隊協助找出可以進一步提升效能的部分。您可以查看個別的註解 (RFC) 和提取要求 (PRs) 要求,進一步瞭解每個 API:
- 改良的 Webpack 區塊策略可發出更精細的套件,減少透過多個路徑擷取的重複程式碼數量 (RFC、PR)。
- 使用模組/無模組模式進行差異載入,在不變更程式碼的情況下 (RFC、PR) 最多可將 Next.js 應用程式中的 JavaScript 總數減少 20%。
- 改善效能指標追蹤,此功能可使用 User Timing API (PR)。
我們也在研究其他功能,藉此改善使用者和開發人員使用 Next.js 的體驗,例如:
- 啟用並行模式即可解鎖元件循序或部分飲水。
- 以 Webpack 為基礎的合規系統,可分析所有來源檔案和產生的資產,以顯示更優質的錯誤和警告 (RFC)。
Nuxt.js
Nuxt.js 是結合 Vue.js 與不同程式庫的網路架構,可提供明確的設定。與 Next.js 類似,還提供許多立即可用的功能:
除了直接改善不同工具的效能,我們也擴大架構基金,為更多開放原始碼架構和程式庫提供金錢支援。隨著我們最近對 Nuxt.js 的支援,不久後還會推出某些功能,包括更聰明的伺服器轉譯和圖片最佳化功能。
Babel
此外,對於幾乎所有架構 (Babel) 的重要基礎工具,我們還做了改進。
Babel 會將包含較新語法的程式碼編譯成不同瀏覽器可理解的程式碼。使用 @babel/preset-env 指定新型瀏覽器是常見的情況,在那裡可以指定不同的瀏覽器目標,為所有所選環境提供足夠的聚填功能。指定目標的其中一種方法是使用 <script
type="module">
來指定所有支援 ES 模組的瀏覽器。
為針對這個案例進行最佳化,我們推出全新的預設設定:@babel/preset-modules。preset-modules
不會將現代語法轉換為較舊的語法,以避免瀏覽器錯誤,而是會轉換為最接近且未毀損的新型語法,藉此修正每個特定錯誤。這會導致新式程式碼幾乎不會修改給大多數瀏覽器。
已使用 preset-env
的開發人員也不必採取任何行動,這些最佳化功能也能受益,因為我們很快就會將這些功能納入 preset-env
。
後續步驟
與開放原始碼架構和程式庫密切合作,藉此提供更優質的體驗,有助於 Chrome 團隊瞭解對使用者和開發人員來說都極為重要的。
如果您採用的是網路架構、UI 程式庫或任何形式的網頁工具 (套件、編譯器、Linter),請申請架構資金!