Chrome 與開放原始碼架構攜手合作，致力打造更優質的網路環境
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。
- 支援延遲載入路徑的標準動態匯入語法。
- 網路工作站支援：在獨立於主執行緒之外的背景執行緒中執行作業。
- Ivy，Angular 新推出 轉譯引擎，提升重新編譯效能，並減少套裝組合 就能在預覽模式中 現有專案
如要進一步瞭解這些改善項目，請前往 「Angular 第 8 版」 Chrome 團隊期待明年能與他們密切合作 土地上
Next.js
Next.js 是採用 React 做為檢視層的網路架構。除了 許多開發人員都預期用戶端架構的 UI 元件模型，Next.js 提供了 內建預設功能數量：
- 使用預設程式碼分割進行轉送
- 編譯和郵件分類 (使用 Babel 和 webpack)
- 伺服器端轉譯
- 在個別網頁層級擷取資料的機制
- 封裝樣式 (使用 styled-jsx)
Next.js 會透過更少的套裝組合進行最佳化，Chrome 團隊也協助找出可改善之處 進一步提升成效想進一步瞭解各個供應商的要求，請查看對方的要求 處理註解 (RFC) 和提取要求 (PR)：
- 改良的 Web Pack 分塊策略可實施更精細的套裝組合，從而減少 透過多個路徑擷取的重複程式碼數量 (RFC、 PR)。
- 透過 模組/無模組模式 這項做法可在不編寫程式碼的情況下，減少 Next.js 應用程式中的 JavaScript 總數 (最多減少 20%) 變更內容 (RFC) PR)。
- 改善採用 User Timing API 的成效指標追蹤功能 (PR)。
我們也在研究其他功能，希望能改善 Next.js，例如：
- 啟用並行模式即可解鎖元件的漸進式或部分水份攝取量。
- 一種以 Webpack 為基礎的一致性系統，可分析所有來源檔案和產生的資產， 並顯示更好的錯誤和警告 (RFC)。
Nuxt.js
Nuxt.js 是一種網路架構，結合了 Vue.js 與不同程式庫， 採用完善的設定與 Next.js 類似，它包含許多立即可用的功能：
除了直接提高不同工具的成效 之外，我們也擴充了 架構基金為更多開放原始碼提供資金援助 架構和程式庫根據我們最近的 支援 Nuxt.js 功能包括更聰明的伺服器轉譯和圖像處理等多項功能， 以及最佳化調整
Babel
而且在絕大多數的情況下，我們也持續提升重要基礎工具的效能 剛剛提到的架構之一 Babel。
Babel 將包含較新語法的程式碼編譯成不同瀏覽器能理解的程式碼。
使用 @babel/preset-env 來指定目標是很常見的情況
新式瀏覽器可用於指定不同的瀏覽器目標，以提供足夠的 polyfill
所有所選環境所需的資源指定目標的其中一種方法是使用 <script
type="module"> 來指定所有支援 ES 的瀏覽器
Modules。
為此，我們推出全新的預設設定；
@babel/preset-modules。而非轉換現代語法
以避免瀏覽器錯誤，preset-modules 會將擷取到
接近可能且非毀損的現代語法。這樣一來，現代程式碼就能將近乎即時地傳送
大多數瀏覽器未經修改。
已使用 preset-env 的開發人員也能享有這些最佳化功能，而不必親自動手
執行任何動作，因為這些功能不久後也會併入 preset-env 中。
後續步驟
與開放原始碼架構和程式庫密切合作，提供更優質的體驗， Chrome 團隊深知對使用者和開發人員而言，核心要素十分重要。
若您使用網路架構、UI 程式庫或任何形式的網頁工具 (套裝組合、編譯器、Linter)， 申請建立架構基金！