推动 Web 框架生态系统的发展

Chrome 与多个开源框架通力协作，共同打造更好的网络环境

Houssein Djirdeh

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。

使用差分 build 缩减 Angular.io 的软件包大小（来自 Angular 版本 8）

• 支持延迟加载路由的标准动态导入语法。
• Web Worker 支持，可在独立于主线程的后台线程中运行操作。
• Ivy 是 Angular 的新渲染引擎，可提供更好的重新编译性能并减小软件包大小，可在现有项目的预览模式下使用。

您可以在“Angular 版本 8”中详细了解这些改进。随着更多功能的推出，Chrome 团队期待明年与他们密切合作。

Next.js

Next.js 是一个使用 React 作为视图层的 Web 框架。除了许多开发者期望使用客户端框架的界面组件模型外，Next.js 还提供了许多内置默认功能：

• 使用默认代码拆分路由
• 编译和捆绑（使用 Babel 和 webpack）
• 服务器端渲染
• 按页面提取数据的机制
• 封装样式（使用 styled-jsx）

Next.js 针对缩减的软件包大小进行了优化，并且 Chrome 团队帮助确定了我们可以在哪些方面进一步提升性能。如需详细了解各个组件，您可以查看其评论请求 (RFC) 和拉取请求 (PR)：

1. 改进了 Webpack 分块策略，可发出更精细的软件包，从而减少通过多个路由（RFC、PR）提取的重复代码的数量。
2. 使用 module/nomodule 模式进行差分加载，可在不更改代码的情况下将 Next.js 应用中的 JavaScript 总量减少多达 20%（RFC、PR）。
3. 改进了使用 User Timing API (PR) 的性能指标跟踪。

Barnebys.com 是一个销售古董和收藏品的大型搜索引擎，启用精细数据块技术后，JavaScript 总数减少了 23%

我们还在探索其他功能，以改善用户和开发者使用 Next.js 时的体验，例如：

• 启用并发模式，以解锁组件的渐进式或部分水合功能。
• 基于 webpack 的一致性系统，用于分析所有源文件和生成的资源，以呈现更好的错误和警告 (RFC)。

Next.js 中的一致性构建错误示例（原型）

Nuxt.js

Nuxt.js 是一个 Web 框架，将 Vue.js 与不同库相结合，以提供专业的设置。与 Next.js 类似，它包含许多开箱即用的功能：

• 使用默认代码拆分路由
• 编译和捆绑（使用 Babel 和 webpack）
• 服务器端渲染
• 对每个页面进行异步数据提取
• 默认数据存储区 (Vuex)

除了直接提升不同工具的性能之外，我们还扩大了框架基金的规模，为更多开源框架和库提供资金支持。我们最近对 Nuxt.js 的支持，计划在不久的将来推出多项功能，包括更智能的服务器渲染和图像优化。

注意 ：框架基金可加快不同框架和库的开发速度，以提升其性能。如果您在开发开源工具并且需要支持，请申请！

Babel

此外，我们在几乎所有提到的框架 Babel 中这一重要底层工具的性能方面，取得了进展。

Babel 将包含新版语法的代码编译成不同浏览器都可以理解的代码。通常使用 @babel/preset-env 定位到新型浏览器，在这些浏览器中可以指定不同的浏览器目标，为所有所选环境提供所需的足够 polyfill。指定目标的一种方法是使用 <script type="module"> 以定位到支持 ES 模块的所有浏览器。

注意 ：如需详细了解如何利用 ES 模块尽可能减少为不需要它们的浏览器提供的 polyfill 代码，请参阅向现代浏览器提供新式代码以加快网页加载速度。

为了针对这种情况进行优化，我们发布了全新的预设 @babel/preset-modules。preset-modules 不会将现代语法转换为旧版语法以避免浏览器 bug，而是通过转换为尽可能接近的非破坏性现代语法来修复每个特定 bug。由此产生的现代代码几乎无需修改即可提供给大多数浏览器。

已在使用 preset-env 的开发者也将从这些优化中受益，而无需采取任何操作，因为它们很快也将合并到 preset-env 中。

后续操作

通过与开源框架和库密切合作，以提供更好的体验，Chrome 团队可以实现对用户和开发者等最重要的内容。

如果您开发的是 Web 框架、界面库或任何形式的 Web 工具（捆绑器、编译器、linter），请申请框架基金！