加強網路架構生態系統

Chrome 與開放原始碼架構攜手合作，致力打造更優質的網路環境

Houssein Djirdeh

Chrome 積極對網路架構生態系統做出貢獻，也會在 Chrome 開發人員高峰會上發言 2019 年涵蓋我們去年的努力成果。

請繼續閱讀以下內容，讓我們回顧演講的重點，並提供其他詳細資訊和資源。

我們如何讓網路更臻完善？

Chrome 團隊的宗旨是改善網路環境，我們致力改善瀏覽器 API 以及 V8，也就是驅動 Chrome 的核心 JavaScript 和 WebAssembly 引擎，因此開發人員 內建有助打造優質網頁的功能。我們也會嘗試改善 已在許多方面對開放原始碼工具做出貢獻，目前已在實際工作環境中。

大部分的網路 開發人員 仰賴開放原始碼工具，且他們不想完全根據自己的需求建構內容 基礎架構用戶端 JavaScript 架構和 UI 程式庫構成 。資料取自三個最熱門的用戶端架構和程式庫 React、Angular 和 Vue 節目 顯示：

• 72% 的參與者 MDN 的第一年網路開發人員和設計師問卷調查 至少使用其中一種架構和程式庫
• 超過 320,000 個網站： HTTP Archive 分析的前 500 萬個網址至少使用其中一種架構和程式庫。
• 如果依使用時間分組，前 100 大網址中有 30 個會至少使用下列其中一種架構，以及 程式庫(這項研究針對內部資料執行)。

換句話說，改善開放原始碼工具能直接促成更好的網路環境，這也是為什麼 Chrome 工程師已開始直接與外部架構和程式庫作者合作。

對網路架構的貢獻

一般用於建構和建構網頁的架構可分為兩類：

• 提供控管機制的 UI 架構 (或程式庫)，例如 Preact、React 或 Vue 顯示在應用程式的檢視層上 (例如透過元件模型)
• 網路架構，例如 Next.js、Nuxt.js 和 Gatsby，可提供端對端系統 而且內建了主觀功能 例如伺服器端轉譯這些架構通常會 使用檢視區塊層的 UI 架構或程式庫。

開發人員可以選擇不使用架構，但只要結合檢視畫面層程式庫、路由器 樣式系統、伺服器轉譯器等等，最後往往會自行建立類型的 這個架構的重點在於網路架構雖然較為明確，但預設可以處理許多這類顧慮。

本文的其餘部分重點介紹了近期導入不同架構的許多改善措施 包括 Chrome 團隊的貢獻

Angular

Angular 團隊已針對架構第 8 版做出多項改善：

• 差異載入，由 預設值為盡量減少新版瀏覽器不需要的 polyfill。

採用差異建構的 angular.io 套件大小縮減 (自 Angular 第 8 版)

• 支援延遲載入路徑的標準動態匯入語法。
• 網路工作站支援：在獨立於主執行緒之外的背景執行緒中執行作業。
• Ivy，Angular 新推出 轉譯引擎，提升重新編譯效能，並減少套裝組合 就能在預覽模式中 現有專案

如要進一步瞭解這些改善項目，請前往 「Angular 第 8 版」 Chrome 團隊期待明年能與他們密切合作 土地上

Next.js

Next.js 是採用 React 做為檢視層的網路架構。除了 許多開發人員都預期用戶端架構的 UI 元件模型，Next.js 提供了 內建預設功能數量：

• 使用預設程式碼分割進行轉送
• 編譯和郵件分類 (使用 Babel 和 webpack)
• 伺服器端轉譯
• 在個別網頁層級擷取資料的機制
• 封裝樣式 (使用 styled-jsx)

Next.js 會透過更少的套裝組合進行最佳化，Chrome 團隊也協助找出可改善之處 進一步提升成效想進一步瞭解各個供應商的要求，請查看對方的要求 處理註解 (RFC) 和提取要求 (PR)：

1. 改良的 Web Pack 分塊策略可實施更精細的套裝組合，從而減少 透過多個路徑擷取的重複程式碼數量 (RFC、 PR)。
2. 透過 模組/無模組模式 這項做法可在不編寫程式碼的情況下，減少 Next.js 應用程式中的 JavaScript 總數 (最多減少 20%) 變更內容 (RFC) PR)。
3. 改善採用 User Timing API 的成效指標追蹤功能 (PR)。

Barnebys.com 是古董和收藏品的大型搜尋引擎，啟用精細分塊後，JavaScript 總數減少 23%

我們也在研究其他功能，希望能改善 Next.js，例如：

• 啟用並行模式即可解鎖元件的漸進式或部分水份攝取量。
• 一種以 Webpack 為基礎的一致性系統，可分析所有來源檔案和產生的資產， 並顯示更好的錯誤和警告 (RFC)。

Next.js (原型) 中的合規版本錯誤示例

Nuxt.js

Nuxt.js 是一種網路架構，結合了 Vue.js 與不同程式庫， 採用完善的設定與 Next.js 類似，它包含許多立即可用的功能：

• 使用預設程式碼分割進行轉送
• 編譯和郵件分類 (使用 Babel 和 webpack)
• 伺服器端轉譯
• 擷取每個網頁的非同步資料
• 預設資料儲存庫 (Vuex)

除了直接提高不同工具的成效 之外，我們也擴充了 架構基金為更多開放原始碼提供資金援助 架構和程式庫根據我們最近的 支援 Nuxt.js 功能包括更聰明的伺服器轉譯和圖像處理等多項功能， 以及最佳化調整

注意： 這個架構有利於提高不同架構和程式庫的效率，以提升這些架構和程式庫的效能。如果你處理的是開放原始碼工具，且需要支援，歡迎申請！

Babel

而且在絕大多數的情況下，我們也持續提升重要基礎工具的效能 剛剛提到的架構之一 Babel。

Babel 將包含較新語法的程式碼編譯成不同瀏覽器能理解的程式碼。 使用 @babel/preset-env 來指定目標是很常見的情況 新式瀏覽器可用於指定不同的瀏覽器目標，以提供足夠的 polyfill 所有所選環境所需的資源指定目標的其中一種方法是使用 <script type="module"> 來指定所有支援 ES 的瀏覽器 Modules。

注意： 如要進一步瞭解如何運用 ES 模組，盡可能減少提供給不需要瀏覽器 polyfill 的程式碼，請參閱「向新式瀏覽器提供新程式碼，加快網頁載入速度」。

為此，我們推出全新的預設設定； @babel/preset-modules。而非轉換現代語法 以避免瀏覽器錯誤，preset-modules 會將擷取到 接近可能且非毀損的現代語法。這樣一來，現代程式碼就能將近乎即時地傳送 大多數瀏覽器未經修改。

已使用 preset-env 的開發人員也能享有這些最佳化功能，而不必親自動手 執行任何動作，因為這些功能不久後也會併入 preset-env 中。

後續步驟

與開放原始碼架構和程式庫密切合作，提供更優質的體驗， Chrome 團隊深知對使用者和開發人員而言，核心要素十分重要。

若您使用網路架構、UI 程式庫或任何形式的網頁工具 (套裝組合、編譯器、Linter)， 申請建立架構基金！