加強網路架構生態系統

Chrome 與開放原始碼架構合作，攜手打造更美好的網路環境

Houssein Djirdeh

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。

採用差異化版本的 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) 和提取要求 (PRs) 要求，進一步瞭解每個 API：

1. 改良的 Webpack 區塊策略可發出更精細的套件，減少透過多個路徑擷取的重複程式碼數量 (RFC、PR)。
2. 使用模組/無模組模式進行差異載入，在不變更程式碼的情況下 (RFC、PR) 最多可將 Next.js 應用程式中的 JavaScript 總數減少 20%。
3. 改善效能指標追蹤，此功能可使用 User Timing API (PR)。

Barnebys.com 是存放古董和收藏品的大型搜尋引擎。啟用精細區塊化後，JavaScript 的總體量減少了 23%

我們也在研究其他功能，藉此改善使用者和開發人員使用 Next.js 的體驗，例如：

• 啟用並行模式即可解鎖元件循序或部分飲水。
• 以 Webpack 為基礎的合規系統，可分析所有來源檔案和產生的資產，以顯示更優質的錯誤和警告 (RFC)。

Next.js (prototype) 中的一致性建構錯誤示例

Nuxt.js

Nuxt.js 是結合 Vue.js 與不同程式庫的網路架構，可提供明確的設定。與 Next.js 類似，還提供許多立即可用的功能：

• 使用預設程式碼分割功能轉送
• 編譯與套裝組合 (使用 Babel 和 webpack)
• 伺服器端算繪
• 每個網頁的非同步資料擷取作業
• 預設資料儲存庫 (Vuex)

除了直接改善不同工具的效能，我們也擴大架構基金，為更多開放原始碼架構和程式庫提供金錢支援。隨著我們最近對 Nuxt.js 的支援，不久後還會推出某些功能，包括更聰明的伺服器轉譯和圖片最佳化功能。

注意： 在取得架構資助的同時，也能加速不同架構和程式庫的處理進度，目標是提升模型效能。如果您正在使用開放原始碼工具且需要支援，歡迎申請！

Babel

此外，對於幾乎所有架構 (Babel) 的重要基礎工具，我們還做了改進。

Babel 會將包含較新語法的程式碼編譯成不同瀏覽器可理解的程式碼。使用 @babel/preset-env 指定新型瀏覽器是常見的情況，在那裡可以指定不同的瀏覽器目標，為所有所選環境提供足夠的聚填功能。指定目標的其中一種方法是使用 <script type="module"> 來指定所有支援 ES 模組的瀏覽器。

注意： 如要進一步瞭解如何利用 ES 模組，盡量減少傳送至不需要瀏覽器的 polyfill 程式碼，請參閱「為新型瀏覽器提供新型程式碼，加快網頁載入速度」一文。

為針對這個案例進行最佳化，我們推出全新的預設設定：@babel/preset-modules。preset-modules 不會將現代語法轉換為較舊的語法，以避免瀏覽器錯誤，而是會轉換為最接近且未毀損的新型語法，藉此修正每個特定錯誤。這會導致新式程式碼幾乎不會修改給大多數瀏覽器。

已使用 preset-env 的開發人員也不必採取任何行動，這些最佳化功能也能受益，因為我們很快就會將這些功能納入 preset-env。

後續步驟

與開放原始碼架構和程式庫密切合作，藉此提供更優質的體驗，有助於 Chrome 團隊瞭解對使用者和開發人員來說都極為重要的。

如果您採用的是網路架構、UI 程式庫或任何形式的網頁工具 (套件、編譯器、Linter)，請申請架構資金！