Chrome 團隊相當重視使用者體驗和蓬勃發展的網路生態系統。我們希望使用者在網路上能享有最佳體驗，除了靜態文件，也希望使用內容豐富的互動式應用程式。
開放原始碼工具和架構扮演著重要角色，可讓開發人員建構網頁版的現代化應用程式，同時提供良好的開發人員體驗。這些架構和工具可為各種規模的公司和建立網路環境的個別使用者提供助力。
我們認為架構也在協助開發人員處理重要的品質方面 (例如效能、無障礙功能、安全性、行動裝置完備性) 方面也扮演著重要的角色。與其要求每位開發人員和網站擁有者精通這些領域的專家，並跟上日新月異的最佳做法，架構可以提供內建解決方案來支援這些做法。這可讓開發人員專注於建構產品功能。
簡單來說，我們的願景是，高度的使用者體驗品質會成為建構網路平台的副作用。
Aurora：Chrome 與開放原始碼網路架構與工具攜手合作
近兩年來，我們與 Next.js、Nutx 和 Angular 等熱門架構攜手合作，致力提升網路效能。我們也為 Vue、ESLint、webpack 等熱門工具和程式庫提供資金。我們今天推出的是「Aurora」這個名稱。
極光是一種自然光線，會在空中發光。我們希望透過各種架構，讓打造閃耀的使用者體驗變得更加亮眼，因此認為這個名稱是合適的選擇。
在接下來的幾個月內，我們將會分享更多 Aurora 的相關詳細資訊。這部分是由小型 Chrome 工程師 (在內部稱為 WebSDK) 和架構作者的團隊合作。我們的目標是盡可能為正式版應用程式提供最佳使用者體驗，無論使用哪個瀏覽器轉譯都沒問題。
我們的策略
Google 在運用架構和工具建構及維護大型網頁應用程式，例如 Google 搜尋、地圖、圖片搜尋、Google 相簿等。我們發現架構如何提供強大的預設機制和使用者意見工具，在可預測的應用程式品質中扮演重要角色。
架構在影響 DX 和 UX 時擁有獨特的測試觀點，因為它們橫跨整個系統：用戶端和伺服器、開發和實際工作環境，並整合了編譯器、Bundler、Linter 等工具。
將解決方案導入架構後，開發人員團隊就能使用這些解決方案，將時間投入在產品最重要的事務上，也就是為使用者提供實用的功能。
我們努力改善位於堆疊各層的工具時，也會管理應用程式生命週期的每個步驟，例如 Next.js、Nutx 和 Angular CLI。因此，由於 React 採用率是核心 UI 架構生態系統中規模最大的，我們大多數的最佳化作業都先在 Next.js 中證明，再擴大範圍擴大至整個生態系統。
Aurora 將解決方案導入熱門技術堆疊的適當層，大規模支援成功。藉由消除瀏覽器和架構之間的差異，可讓高品質的優勢成為建構網路的副作用，同時作為意見回饋循環來改善網路平台。
我們的工作程序是什麼？
Aurora 串連瀏覽器和開發人員生態系統時，我們的原則為：謙遜、好奇心、科學查詢和實用。我們與架構作者合作，共同改善各項異動、與社群攜手合作，並盡職調查程序來因應任何變化。
總結我們開發新功能的步驟：
- 利用代表性應用程式，找出熱門堆疊中的使用者體驗問題。
- 藉由設計解決方案來解決這個問題，並著重介紹「強式預設值」。
- 搭配其他架構堆疊驗證功能，確保其可彈性調整。
- 您可以在幾個正式版應用程式中進行實驗，藉此驗證功能，通常是透過效能實驗室測試。
- 運用 RFC 程序來推動設計，解決社群意見回饋。
- 將這項功能放在熱門堆疊中，通常位於旗幟後方。
- 在代表性正式版應用程式中啟用這項功能，以評估品質和開發人員工作流程整合。
- 針對採用或升級功能的代表性正式版應用程式追蹤指標，藉此衡量效能改善程度。
- 啟用該功能做為堆疊的預設功能，讓所有升級的使用者都能受惠。
- 一旦證明，請再搭配其他架構來介紹功能。
- 透過意見回饋循環找出網路平台中的差距。
- 解決下一個問題。
許多架構會共用基礎工具和外掛程式 (Webpack、Babel、ESLint、TypeScript 等)。這有助於產生漣漪效果，即使只促成單一架構堆疊也是如此。
此外，Chrome Framework Fund 還支援提供資金的開放原始碼工具和程式庫。雖然我們希望上述問題和解決方案層之間存在足夠的重疊性，以便翻譯成其他架構和工具，但我們知道還有什麼地方需要改進。因此，我們竭盡所能，確保程式庫和架構能協助開發人員邁向成功。這也是我們持續投資 Chrome 架構基金的原因之一。截至目前為止，此程式庫可支援 Webpack 5 和 Nuxt 的效能，以及 ESLint 的效能和改善項目。
我們至今已解鎖哪些成果？
我們的工作一直都著重在針對圖片、JS、CSS、字型等資源進行基本最佳化。我們提供了多項最佳化功能，改善多個架構的預設值，包括：
- Next.js 中的圖片元件，當中包含載入圖片的最佳做法，接著是與 Nuxt 進行相同作業的合作。使用這個元件可大幅改善繪製時間和版面配置位移，例如減少 57% 的最大內容繪製量，以及 nextjs.org/give 的累計版面配置位移 100%。
- 在建構期間自動內嵌 CSS 供網站字型宣告。這項功能已導入 Angular (Google Fonts) 和 Next.js (Google Fonts 和 Adobe Fonts)，因此改善了最大內容繪製和首次內容繪製 (範例)。
- 在 Angular 和 Next.js 中使用 Critter 來內嵌重要的 CSS，以縮短繪製時間。與字型 CSS 內嵌功能合併使用後，在一般的大規模 Angular 應用程式中，Lighthouse 效能分數提升了 20-30 分。
- Next.js 提供立即可用的 ESLint 支援，其中包含自訂外掛程式和可共用的設定，可讓您在建構期間輕鬆找出常見的架構問題，進而提高載入效能。
- 推出建立 React App 和 Next.js 內建的效能重組，以便透過網站體驗指標和其他自訂指標，輕鬆深入瞭解網頁效能。
- Next.js 和 Gatsby 提供的精細區塊，能將套件大小減少 30% 至 70%，同時提升快取效能。這已成為 Webpack 5 中的預設選項。
- 為舊版瀏覽器另外設置polyfill 區塊，與 Next.js 團隊合作，以改善新世代瀏覽器的套件大小。
這些功能可能都是自動預設為啟用，或只需要簡單的選擇啟用。這是為了確保開發人員能夠輕鬆獲得優勢，同時又不會增加工作流程的複雜度。
我們對 2021 年的計畫有哪些規劃？
在今年剩餘時間內，我們將重點放在協助架構堆疊改善使用者體驗，以及改善網站體驗 Core Web Vitals 等指標的成效。這些工作包括：
- 強制執行最佳做法的一致性。詳情請參閱這篇網誌文章。
- 借助我們與之合作，最佳化圖片、字型和關鍵 CSS，改善初始載入效能。
- 根據我們對指令碼元件的作業基礎，載入第三方指令碼 (第三方指令碼)，且能以最少的效率載入，並深入研究如何以最佳方式排序及序列第三方。
- 大規模的 JavaScript 效能 (例如支援 Next.js 中的 React Server 元件)。
我們的團隊會在 RFC 和設計文件上發布更頻繁的 RFC 資訊與設計文件，希望任何架構或開發人員都能按部就行。
結論
Aurora 團隊 (Shubhie、Houssein、Alex、Gerald、Ralph、Addy、Kara、Keen 和 Katie) 希望能持續改善使用者原始碼架構，以期改善使用者體驗。我們會繼續加深參與度 並納入更多架構和工具我們團隊在未來一年中會發布更多網誌文章、對話內容和 RFC，請持續觀看以下影片：)