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