Chrome 团队非常重视用户体验和蓬勃发展的 Web 生态系统。 我们希望用户不仅在处理静态文档时能获得最佳网络体验，在使用富媒体、高度互动性应用时也能获得最佳体验。
开源工具和框架在帮助开发者构建 Web 端现代应用的同时，还能提供良好的开发者体验，发挥着重要作用。这些框架和工具为各种规模的公司以及面向 Web 进行构建的个人赋予了强大能力。
我们认为，框架还可以在帮助开发者提升性能、无障碍功能、安全性、移动设备准备情况等关键质量方面发挥重要作用。该框架可以通过内置解决方案来支持这些需求，而无需让每位开发者和网站所有者都成为这些领域的专家，并跟上不断变化的最佳实践。这让开发者能够专注于构建产品功能。
简而言之，我们的愿景是，在 Web 上构建应用时，用户体验质量会水到渠成。
Aurora：Chrome 与开源 Web 框架和工具的协作
在近两年的时间里，我们一直在使用一些最流行的框架（例如 Next.js、Nuxt 和 Angular）来提升 Web 性能。我们还资助了 Vue、ESLint、webpack 等热门工具和库。今天，我们为这项工作命名为 Aurora。
极光是一种在天空中闪烁的自然光现象。我们一直在努力帮助使用框架构建的用户体验熠熠生辉，因此认为这个名称非常合适。
在未来几个月内，我们将分享有关 Aurora 的更多详细信息。这是由一小组 Chrome 工程师（内部代码名称为 WebSDK）和框架作者共同完成的。我们的目标是为正式版应用提供尽可能出色的用户体验，无论您是在哪种浏览器中呈现应用。
我们的策略是什么？
在使用框架和工具构建和维护 Google 搜索、Google 地图、Google 图片搜索、Google 相册等大型 Web 应用的过程中，我们学到了很多知识。我们发现，框架可以通过提供强大默认值和有主见的工具，在可预测的应用质量方面发挥关键作用。
框架涵盖整个系统（客户端和服务器、开发环境和生产环境），并集成了编译器、捆绑器、lint 等工具，因此在影响 DX 和 UX 方面具有独特的优势。
将解决方案内置到框架中后，开发者团队就可以使用这些解决方案，并将时间集中在对产品最重要的方面，即为用户提供出色的功能。
我们会努力改进堆栈的每个层中使用的工具，同时 Next.js、Nuxt 和 Angular CLI 等框架可管理应用生命周期的每个步骤。因此，鉴于 React 在核心界面框架生态系统中的采用率最高，我们的大多数优化都是先在 Next.js 中进行验证，然后再扩展到生态系统的其余部分。
Aurora 通过在热门技术栈的正确层级提供解决方案，助力您实现规模化成功。通过弥合浏览器和框架之间的差距，它使高质量成为面向 Web 构建的副产品，同时充当改进 Web 平台的反馈环。
我们的工作流程是怎样的？
我们在构建 Aurora 桥梁连接浏览器和开发者生态系统时遵循以下原则：谦逊、好奇、科学探究和实用主义。我们会与框架作者合作进行改进，与社区协作，并在发布任何更改之前进行尽职调查。
总的来说，我们在开发任何新功能时都会遵循以下步骤：
- 使用代表性应用，找出热门堆栈中的用户体验问题。
- 设计原型来解决此问题，重点是“强制性默认值”。
- 使用其他框架堆栈验证该功能，以确保其可自适应。
- 在几个正式版应用中进行实验来验证该功能，通常还会进行实验室测试来衡量性能。
- 使用 RFC 流程推动设计，并解决社区反馈。
- 将功能引入到热门堆栈中，通常在标志后面。
- 在代表性正式版应用中启用该功能，以评估质量和开发者工作流集成。
- 通过跟踪采用了该功能或进行了升级的代表性正式版应用中的指标，衡量性能提升情况。
- 在堆栈中将该功能设为默认功能，以便所有升级用户受益。
- 验证完毕后，再使用其他框架来实现该功能。
- 通过反馈环，找出 Web 平台中存在的缺口。
- 继续解决后续问题。
底层工具和插件（webpack、Babel、ESLint、TypeScript 等）在许多框架中共享。这有助于产生涟漪效应，即使贡献于单个框架堆栈也是如此。
此外，Chrome 框架基金还会为开源工具和库提供资金支持。虽然我们希望上述问题和解决方案层与其他框架和工具有足够的重叠，但我们知道自己可以做得更多。为此，我们希望尽自己的力量，确保有助于开发者取得成功的库和框架能够蓬勃发展。这正是我们将继续投资 Chrome 框架基金的原因之一。到目前为止，它已支持 Webpack 5、Nuxt 以及 ESLint 的性能和改进工作。
我们目前取得了哪些成效？
我们的工作一直专注于对图片、JS、CSS、字体等资源进行基础优化。我们进行了多项优化，以改进多个框架的默认设置，包括：
- Next.js 中的 Image 组件，用于封装图片加载的最佳实践，然后与 Nuxt 进行协作。使用此组件后，绘制时间和布局偏移显著缩短（例如：nextjs.org/give 上的 Largest Contentful Paint 缩短了 57%，累计布局偏移则完全消失）。
- 在构建时自动内嵌 Web 字体声明的 CSS。此功能已在 Angular（Google Fonts）和 Next.js（Google Fonts 和 Adobe Fonts）中推出，这使得 Largest Contentful Paint 和 First Contentful Paint 得到了显著改进（示例）。
- 在 Angular 和 Next.js 中使用 Critters 内嵌关键 CSS，以缩短绘制时间。在典型的大型 Angular 应用中，将此功能与字体 CSS 内嵌功能结合使用后，Lighthouse 性能得分提高了 20-30 分。
- Next.js 中开箱即用的 ESLint 支持，其中包含自定义插件和可共享的配置，可让您更轻松地在构建时捕获特定于框架的常见问题，从而获得更可预测的加载性能。
- 在 Create React App 和 Next.js 中引入了内置性能中继，以便通过 Web Vitals 和其他自定义指标更轻松地深入了解网页性能。
- Next.js 和 Gatsby 中推出了精细分块功能，可将软件包大小缩减 30% 到 70%，同时提升缓存性能。这已成为 Webpack 5 中的默认值。
- 与 Next.js 团队合作，为旧版浏览器创建了单独的 polyfill 分块，以缩减现代浏览器中的软件包大小。
这些功能中的每项都已自动启用（默认启用），或者只需简单的选择启用即可。这对于确保开发者能够轻松获享这些优势，同时又不会增加工作流的复杂性至关重要。
我们计划在 2021 年做些什么？
在剩余的 2021 年里，我们将专注于帮助框架堆栈改善用户体验，以及提升其在 Core Web Vitals 等指标方面的表现。这项工作包括：
- 遵循最佳实践。如需了解详情，请参阅博文。
- 通过我们合作优化图片、字体和关键 CSS，优化初始加载性能。
- 在脚本组件的基础上，深入研究如何最佳地排序和顺序第三方脚本 (3P)，从而尽可能降低性能影响，加载第三方脚本。
- 大规模 JavaScript 性能（例如，在 Next.js 中支持 React 服务器组件）。
我们的团队将致力于定期在 RFC 和设计文档中发布有关这些想法的更多信息，以便任何希望跟进的框架或开发者都能做到。
总结
Aurora 团队（Shubhie、Houssein、Alex、Gerald、Ralph、Addy、Kara、Keen、Katie）期待继续与开源框架社区密切合作，共同改进 Next.js、Nuxt 和 Angular 中的默认用户体验。我们会不断扩大合作范围，逐步涵盖更多框架和工具。请关注此空间，了解我们团队在未来一年内发布的更多博文、演讲和 RFC :)