🌑

☀️

Hi Dear.

Home Posts About RSS Email

最近，Microsoft Edge 团队发表了一篇文章，介绍了他们如何改进 Edge 浏览器以提升其速度。

在文章中，微软对 React 提出了一些批评，并宣布他们将不再在 Edge 浏览器中使用 React。

接下来，我将详细解释这篇文章的内容，分析这对 React 和 JavaScript 开发者的影响，以及 Microsoft Edge 团队的真正意图。

Microsoft Edge 是基于 Google 的开源浏览器项目 Chromium 构建的，默认用户界面来源于 Chromium。

为了避免 Edge 和 Chrome 看起来相似，微软为 Edge 设计了独特的用户界面组件和元素，而且这些组件是用 React 开发的。

在 Edge 浏览器中，许多小组件是用 React 创建的，它们共同构成了整个浏览器。

然而，整个 Edge 浏览器并不是一个完整的 React 应用程序。它使用包含 React 的 HTML 页面组合多个组件。菜单、下拉菜单和收藏标签都是小型的 React 应用程序。

这并不高效，对吧？尤其是对于那些数据不会动态变化的用户界面来说。这种低效率让微软对使用 React 产生了疑问。

但这只是冰山一角。我们很快会揭示，到底是 React 自身的问题，还是微软人为制造的缺陷。

微软认为 React 效率不高，因此他们进行了改进，并在 2024 年 5 月 28 日发表的文章中宣布了这一消息。

微软发现组件之间的共享代码包过大，导致浏览器变慢。

他们本不应该在不同组件之间共享代码包，但这是一个问题。以下是他们的理由：

正如我之前解释的那样，Edge 共享了多个 React 应用程序。

他们并没有创建多个 React 项目，而是在多个地方使用同一个 JavaScript 包，并将该包挂载到多个组件的属性上。

JavaScript 包是一种优化技术，它将多个 JavaScript 文件组合成一个文件，以有效减少服务器请求并提高处理效率。

而第二个原因正是我写这篇文章的原因。微软间接指出，React 是导致他们代码包问题的罪魁祸首。

微软间接地提到了React，因为他们正在开发基于 React 的项目，例如用于Windows、MacOS和Xbox 的 React Native。然而他们仍然不愿意在Edge中使用React

尽管微软正在开发 React Native，但他们仍然没有在 Edge 浏览器中使用它。Edge 是一个原生桌面应用程序，React Native 本应是一个理想的解决方案，但微软有不同的看法。

这是因为在过去，使用 HTML、CSS 和 JavaScript 或 React 来制作菜单、下拉菜单等是常见的模式。那么他们为什么要改变这种做法呢？

在早期，菜单及其选项都是独立的 HTML 文件。每个按钮或链接执行特定操作时都会跳转到一个 HTML 文件。

然而，这种旧模式仅用于菜单等组件，但微软显然没有意识到这一点。

他们为每一个简单的组件都使用了带有 React 的 HTML 文件。每个 HTML 文件都需要 JavaScript，并且他们将这些 JavaScript 代码作为代码包共享给每个团队。

微软在他们的浏览器中嵌入了多个 HTML 页面（在 React 应用中）来控制整个用户界面。现在，他们正在寻找一个能够解决这些问题的方案。

首先，问题不在于 React，而在于微软的错误使用。

一个包(bundle)应该针对特定的网页工作，并能够独立完成其功能。每个页面可以有单独的包。

然而，当你在不同团队之间共享相同的包或文件时，可以预料到可能会出现混乱。每个团队都会访问并修改相同的包。

结果是可以预见的。React 并不是为他们那样的使用方式设计的。React 并不慢，但当你创建几十个实例时，也不能期望它速度飞快。

微软为他们自己引发的问题想出了一个解决方案。他们创建了一个自定义框架。

微软发布了 WebUI 2.0（不是 Web 2.0）。这是一种「标记优先」的架构。它通过最小化代码包体积和初始化时运行的 JavaScript 数量来解决大代码包的问题。

微软已经开始使用这种新架构来解决之前提到的两个问题。他们错误地使用了 React，忽视了 React Native 的存在，并试图解决一个自己制造的问题。

最初，他们为每个组件使用了包含 React 的独立 HTML 文件。然后，他们将每个 HTML 文件所需的 JavaScript 代码载入到一个由其他十个团队共享的包中。

现在，他们已经不再使用 React。你对此有什么看法？

翻译 — Jul 23, 2024

Made with ❤ and at Guangzhou.