加強網路架構生態系統

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

Houssein Djirdeh

Chrome 是網頁架構生態系統的積極貢獻者，我們在 2019 年 Chrome 開發人員高峰會的演講中，介紹了過去一年來的工作內容。

請繼續閱讀，進一步瞭解這場演講的內容，並查看其他詳細資料和資源。

如何讓網路變得更好？

Chrome 團隊的目標是打造更優質的網路。我們致力於改良瀏覽器 API 和 V8 (Chrome 的核心 JavaScript 和 WebAssembly 引擎)，為開發人員提供有助於建構優質網頁的功能。我們也透過許多方式貢獻開放原始碼工具，盡力改善目前已上線的網站。

大多數網頁開發人員盡可能使用開放原始碼工具，且不希望完全自訂基礎架構。用戶端 JavaScript 架構和 UI 程式庫在開放原始碼使用量中，所占比例越來越高。根據三種最熱門的用戶端架構和程式庫 (React、Angular 和 Vue) 的資料顯示：

• 在 MDN 首屆網路開發人員與設計師調查中，有 72% 的參與者至少使用其中一個架構和程式庫。
• 在 HTTP Archive 分析的前 500 萬個網址中，有超過 32 萬個網站使用至少一個這類架構和程式庫。
• 如果依據花費時間分組，前 100 個網址中有 30 個使用至少一個這類架構和程式庫。(研究以內部資料為依據)。

這表示更優質的開放原始碼工具可直接改善網路，因此 Chrome 工程師已開始直接與外部架構和程式庫作者合作。

對網路架構的貢獻

用於建構及架構網頁的架構通常分為兩類：

• UI 架構 (或程式庫)，例如 Preact、React 或 Vue，可控制應用程式的檢視層 (例如透過元件模型)。
• 網頁架構，例如 Next.js、Nuxt.js 和 Gatsby，提供內建主觀功能的端對端系統，例如伺服器端轉譯。這些架構通常會利用 UI 架構或程式庫做為檢視層。

開發人員可以選擇不使用框架，但如果將檢視層程式庫、路由器、樣式系統、伺服器算繪器等拼湊在一起，往往會建立自己的框架類型。雖然網路架構有既定做法，但預設會處理許多這類問題。

本文的其餘部分將重點介紹最近在不同架構和工具中進行的許多改良，包括 Chrome 團隊的貢獻。

Angular

Angular 團隊已在架構第 8 版中推出多項改善措施：

• 預設採用差異化載入，盡量減少新版瀏覽器不需要的 Polyfill。

使用差異化建構作業縮減 angular.io 的套件大小 (從 Angular 第 8 版開始)

• 支援標準動態匯入語法，可延遲載入路徑。
• 支援 Web Worker，可在與主執行緒不同的背景執行緒中執行作業。
• Angular 的新Ivy 算繪引擎可提升重新編譯效能，並縮減套件大小，現已推出預先發布版，供現有專案使用。

如要進一步瞭解這些改善項目，請參閱「Angular 第 8 版」。Chrome 團隊期待在接下來的一年與他們密切合作，推出更多功能。

Next.js

Next.js 是一種網路框架，使用 React 做為檢視層。除了許多開發人員期望從用戶端架構取得的 UI 元件模型外，Next.js 還提供多項內建預設功能：

• 使用預設程式碼分割進行轉送
• 編譯和組合 (使用 Babel 和 webpack)
• 伺服器端算繪
• 以網頁為單位擷取資料的機制
• 封裝樣式 (使用 styled-jsx)

Next.js 會盡量縮減套件大小，而 Chrome 團隊則協助找出可進一步提升效能的領域。如要進一步瞭解各項提案，請查看其意見徵求 (RFC) 和提取要求 (PR)：

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

Barnebys.com

我們也正在探索其他功能，以改善 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 模組的所有瀏覽器。

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

為此，我們推出了全新的預設集：@babel/preset-modules。preset-modules 不會為了避開瀏覽器錯誤而將新版語法轉換為舊版語法，而是會轉換為最接近的非中斷新版語法，藉此修正每個特定錯誤。因此產生的現代化程式碼幾乎不用修改，就能提供給大多數瀏覽器。

如果開發人員已使用 preset-env，這些最佳化功能很快也會納入 preset-env，因此他們不必採取任何行動，就能享有這些優勢。

後續步驟

與開放原始碼架構和程式庫密切合作，提供更優質的體驗，有助於 Chrome 團隊瞭解使用者和開發人員的根本需求。

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