Chrome 正在与开源框架合作，致力于打造更好的网络环境
Chrome 是 Web 框架生态系统的积极贡献者，我们在 2019 年 Chrome 开发者峰会上的演讲介绍了过去一年中我们所做的工作。
请继续阅读，详细了解本次讲座的内容以及其他相关资源。
我们如何才能让网络变得更好？
Chrome 团队的每个成员都致力于打造更好的网络体验。我们致力于改进浏览器 API 和 V8（Chrome 的核心 JavaScript 和 WebAssembly 引擎），以便为开发者提供有助于他们构建出色网页的功能。我们还通过多种方式为开源工具贡献力量，努力改进目前已投入使用的网站。
大多数 Web 开发者尽可能依赖开源工具，并且不希望构建完全自定义的基础设施。客户端 JavaScript 框架和界面库在开源使用量中所占的比例越来越高。有关三种最热门的客户端框架和库（React、Angular 和 Vue）的数据显示：
- 在 MDN 的首届年度 Web 开发者和设计师调查中，有 72% 的参与者至少使用过其中一个框架和库。
- 在 HTTP Archive 分析的前 500 万个网址中，超过 32 万个网站至少使用过这些框架和库中的一个。
- 按花费的时间分组时，前 100 个网址中有 30 个使用了这些框架和库中的至少一个。（研究基于内部数据。）
这意味着，更好的开源工具可以直接带来更好的 Web 体验，这也是 Chrome 工程师开始直接与外部框架和库作者合作的原因。
对 Web 框架的贡献
常用于构建和组织网页的框架分为两类：
- 界面框架（或库），例如 Preact、React 或 Vue，它们可控制应用视图层（例如通过组件模型）。
- Web 框架，例如 Next.js、Nuxt.js 和 Gatsby，它们提供了一个端到端系统，其中内置了意见性功能，例如服务器端渲染。这些框架通常会利用界面框架或库来处理视图层。
开发者可以选择不使用框架，但通过将视图层库、路由器、样式系统、服务器渲染器等拼凑在一起，他们往往最终会创建自己的框架类型。虽然 Web 框架具有主观性，但默认情况下会处理许多此类问题。
本文的其余部分重点介绍了最近在不同框架和工具中实现的多项改进，其中包括 Chrome 团队的贡献。
Angular
Angular 团队已针对框架的第 8 版发布了多项改进：
- 默认情况下采用差异化加载，以最大限度减少新版浏览器不需要的 Polyfill。
- 支持用于延迟加载路由的标准动态导入语法。
- Web Worker 支持，可在与主线程分离的后台线程中运行操作。
- Angular 的新渲染引擎 Ivy 可提供更好的重新编译性能并减小软件包大小，目前已在预览模式下提供给现有项目。
您可以参阅“Angular 第 8 版”详细了解这些改进，Chrome 团队期待在未来一年中与他们密切合作，推出更多功能。
Next.js
Next.js 是一种使用 React 作为视图层的 Web 框架。除了许多开发者期望从客户端框架获得的界面组件模型之外，Next.js 还提供了一些内置的默认功能：
- 使用默认代码拆分进行路由
- 编译和打包（使用 Babel 和 webpack）
- 服务器端渲染
- 用于按网页级提取数据的机制
- 封装式样式（使用 styled-jsx）
Next.js 经过优化，可减少软件包大小，而 Chrome 团队帮助我们确定了可以进一步提升性能的方面。您可以查看其意见征求 (RFC) 和拉取请求 (PR)，详细了解每项功能：
- 改进了 webpack 分块策略，可生成更精细的软件包，从而减少通过多条路线提取的重复代码量（RFC、PR）。
- 采用 module/nomodule 模式的差异化加载，可在不更改代码的情况下将 Next.js 应用中的 JavaScript 总量减少多达 20%（RFC、PR）。
- 改进了效果指标跟踪，利用了 User Timing API (PR)。
我们还在探索其他功能，以改善用户和开发者在使用 Next.js 时的体验，例如：
- 启用并发模式以解锁组件的渐进式或部分水合。
- 一个基于 webpack 的一致性系统，用于分析所有源文件和生成的资源，以显示更出色的错误和警告 (RFC)。
Nuxt.js
Nuxt.js 是一个 Web 框架，它将 Vue.js 与不同的库相结合，以提供有主张的设置。与 Next.js 类似，它包含许多开箱即用的功能：
除了直接改进各种工具的性能之外，我们还扩大了框架基金的规模，以便为更多开源框架和库提供资金支持。随着我们最近对 Nuxt.js 的支持，我们计划在不久的将来推出一些功能，包括更智能的服务器端渲染和图片优化。
Babel
我们还在改进几乎所有上述框架中的一个重要底层工具 Babel 的性能方面取得了进展。
Babel 会将包含较新语法的代码编译为不同浏览器可以理解的代码。
现在，使用 @babel/preset-env 来定位现代浏览器已成为一种常见做法，通过指定不同的浏览器目标，可以为所有所选环境提供所需的足够 Polyfill。指定目标的一种方法是使用 <script
type="module"> 来定位支持 ES 模块的所有浏览器。
为了针对这种情况进行优化，我们推出了一个全新的预设：@babel/preset-modules。preset-modules 不会将现代语法转换为旧语法来避免浏览器 bug，而是通过转换为尽可能接近的未损坏的现代语法来修复每个特定 bug。这样一来，现代代码就可以几乎未经修改地交付给大多数浏览器。
已经使用 preset-env 的开发者也将受益于这些优化，而无需执行任何操作，因为这些优化很快也会纳入 preset-env 中。
接下来怎么做？
通过与开源框架和库密切合作，提供更出色的体验，Chrome 团队得以了解对用户和开发者而言至关重要的基本要素。
如果您从事 Web 框架、界面库或任何形式的 Web 工具（打包程序、编译器、代码检查器）方面的工作，请申请框架基金！