作者丨Afan Khan

編譯丨諾亞

出品 | 51CTO技術棧（微信號：blog51cto）

最近，微軟Edge團隊撰寫了一篇文章，介紹了微軟團隊如何努力提升Edge瀏覽器的性能。但在文中，微軟對React提出了批評，并宣布他們將不再在Edge瀏覽器的開發中使用React。

我將詳細解析他們的整篇文章內容，探討這一決定對React、JavaScript開發者的影響，以及微軟Edge團隊背后的真正意圖。

一、歷史背景

微軟Edge瀏覽器是基于Chromium構建的，Chromium是谷歌的一個開源網絡瀏覽器項目。微軟Edge的默認用戶界面來源于Chromium。

顯而易見，微軟不希望Edge看起來像Chrome。因此，Edge擁有一套由微軟設計的用戶界面組件和元素。然而，這些組件是利用React開發的。

Edge中的許多小部件都是通過React創建的，它們共同構成了整個瀏覽器。

實際上，Edge瀏覽器并非一個徹頭徹尾的React項目。它更像是一個精巧的拼圖，通過HTML頁面巧妙地嵌入了多個React驅動的小部件，諸如菜單、下拉列表以及收藏夾標簽，都藏著React編織的小魔法。

可這樣的做法并不那么靈光，尤其是面對那些鮮少變動的UI信息時，顯得有點力不從心。其效率低下導致微軟開始對React產生質疑。

但這個故事遠未揭開全部真相。我們很快就會發現，到底是React有問題，還是微軟在設計上存在人為缺陷。

二、問題所在

微軟聲稱React效率不高，因此他們進行了改進，并于2024年5月28日發布的一篇文章中宣布了這一消息。

微軟注意到，多個組件間共享的捆綁包過大，這導致了瀏覽器運行速度減慢。

理論上，這些組件不應共用一個捆綁包，但既然微軟指出了這個問題，以下是他們的理由：

1.UI代碼存在模塊化問題。不同組件團隊不當共享了通用代碼包和文件，導致UI界面中一個區域因加載了不必要的共享資源而拖累了另一個區域的加載速度。

2.微軟采用了一個框架，該框架依賴JavaScript，通過客戶端渲染技術來呈現UI。微軟聲稱，這是導致其瀏覽器速度變慢的第二個原因。

如前所述，Edge瀏覽器中集成了多個React應用。

他們并未啟動多個React項目，而是在多個位置使用了一個單一的JavaScript包，并將該包掛載到了許多組件中的多個屬性上。

而第二個原因正是我撰寫本文的緣由。微軟間接地指出，React正是導致其代碼包問題的框架。

圖片

微軟時不時提及React，是因為他們正全速推進像React Native這樣針對Windows、MacOS乃至Xbox的項目。但對于Edge瀏覽器，React似乎成了他們不愿觸及的“逆鱗”。

即便是親手操刀React Native的開發，微軟也遲遲未讓其涉足Edge的領地。作為一款原生桌面應用，Edge與React Native看似天作之合，但微軟對此有不同的看法。   

過去，借助HTML、CSS、JavaScript，乃至React來搭建菜單、下拉框等界面元素，是業界的“金科玉律”。而今，微軟決意轉身，背后自有一番深思熟慮的考量。

圖片

在過去，菜單及其選項通常是獨立的HTML文件。每個執行特定操作的按鈕或鏈接都會重定向到一個HTML文件。

然而，這種舊模式主要適用于諸如菜單之類的組件。但顯然，微軟并未完全理解這一點。

他們為每個簡單的組件使用帶有React的HTML文件。每個HTML文件都需要JavaScript。并且，他們將這些JavaScript代碼作為捆綁包與每個團隊共享。

微軟將多個HTML頁面（在React應用中）嵌入瀏覽器中以控制整個用戶界面。現在，他們正在尋找解決這兩個問題的辦法。

三、解決方案

首先，問題并不在于React本身，而是微軟錯誤地實施了它。

理想的狀況下，每個代碼包應服務于特定的網頁，獨立地完成其功能。每個頁面可以有自己的獨立代碼包或集合。

但是，當你在不同團隊的工作中共享相同的代碼包或文件時，混亂幾乎是必然的。每個團隊都在訪問和修改相同的代碼包。

結果不出所料。React并非不適合他們的用途，而是他們使用方式不當。React本身并不慢，但當你創建了數十個實例時，就不能指望它還能保持極高的運行速度。

微軟針對自己造成的問題提出了解決方案：他們創建了一個自定義框架。

微軟宣布了WebUI 2.0——這是一種以標記優先的架構。它通過最小化代碼包的大小及初始化路徑中運行的JavaScript量，解決了代碼包過大的問題。

微軟已開始使用這一新架構來解決我前面提到的兩個問題。他們錯誤地使用了React，忽略了React Native的存在，并解決了一個本可避免的問題。

起初，他們在每個組件中使用了含有React的獨立HTML文件。然后，他們將每個HTML文件所需的JavaScript代碼卸載到了一個共享包中，這個包同時供其他十個團隊使用。而現在，他們不再使用React了。

對此，你怎么看呢？可以把你的想法寫在評論區。

參考鏈接：https://javascript.plainenglish.io/microsoft-is-ditching-react-f8b952b92b9b