大家好，我卡頌。

codesandbox是前端工程師經(jīng)常使用的「代碼在線運(yùn)行環(huán)境」，頁面如下：

他的應(yīng)用場(chǎng)景很廣，比如：

• 有代碼邏輯要分享，分享個(gè)codesandbox鏈接。
• 有新想法需要驗(yàn)證，又不想本地起個(gè)項(xiàng)目，用codesandbox。
• 技術(shù)文檔演示Demo，用codesandbox。

作為一個(gè)在線運(yùn)行代碼的編輯器，這么多人天天免費(fèi)用，他服務(wù)器扛得住么？

畢竟，同樣作為在線代碼運(yùn)行環(huán)境（主要是跑算法題）的leetcode^[1]，如果同時(shí)刷題的人多了，提交后都還得排隊(duì)：

codesandbox是如何實(shí)現(xiàn)的？他會(huì)面臨leetcode一樣的服務(wù)器壓力么？

codesandbox的分類

這個(gè)問題的本質(zhì)其實(shí)是問 —— 用戶在codesandbox中寫的代碼，究竟是在前端還是后端編譯成靜態(tài)資源的？畢竟，如果是在后端完成，會(huì)增加服務(wù)器壓力。

比如，對(duì)于下面這段React代碼：

// main.jsx
import { createRoot } from "react-dom/client";
import { Cpn } from "./Cpn";

function App() {
  return (
    <Cpn />
  );
}
createRoot(document.getElementById("root")).render(<App />);

要想在瀏覽器中運(yùn)行，涉及幾個(gè)前置工作：

• 需要編譯JSX語法，比如將<App/>編譯為_jsx(App, {})。
• 需要解析并提前下載所有依賴，比如這里的react-dom、react包。
• 需要解析模塊依賴關(guān)系，比如main.jsx導(dǎo)入了Cpn.jsx中的Cpn組件。對(duì)于不支持ESM的瀏覽器，需要將代碼打包。對(duì)于支持ESM的瀏覽器，需要處理引入路徑。
• 如果涉及到其他資源，比如圖片、文字、HTML文件，需要有相應(yīng)的處理。

上述工作，codesandbox是在瀏覽器還是服務(wù)器完成的呢？

在這個(gè)例子中，這些工作都能在瀏覽器完成，比如：

• 對(duì)于所有第三方依賴，可以在瀏覽器中直接請(qǐng)求CDN。
• 涉及編譯的工作（比如編譯JSX、模塊依賴分析），本質(zhì)其實(shí)是字符串的解析，可以用瀏覽器版本的babel實(shí)現(xiàn)。

上面的例子是一個(gè)純前端的React項(xiàng)目。但有些依賴服務(wù)端環(huán)境的項(xiàng)目沒法采用上述方式運(yùn)行，比如：

• 使用了Docker的項(xiàng)目。
• 類似Next.js這樣的全棧項(xiàng)目。

這種情況就需要一個(gè)真實(shí)的服務(wù)端環(huán)境。

兩者的區(qū)別可以用下圖概括：

• 純前端項(xiàng)目：編譯與執(zhí)行都能在瀏覽器完成。
• 全棧項(xiàng)目：項(xiàng)目編譯在服務(wù)端進(jìn)行，瀏覽器負(fù)責(zé)項(xiàng)目執(zhí)行。

他們分別對(duì)應(yīng)codesandbox的兩種運(yùn)行環(huán)境：

• Browser Sandbox：基于瀏覽器的本地運(yùn)行環(huán)境。
• Cloud Sandbox：基于MicroVM的云端運(yùn)行環(huán)境。

當(dāng)我們通過模板創(chuàng)建codesandbox項(xiàng)目時(shí)，可以通過「右上角是否有Cloud標(biāo)記」區(qū)分兩者：

可以發(fā)現(xiàn)：

• 純前端項(xiàng)目（比如React項(xiàng)目、純JS項(xiàng)目）使用Browser Sandbox。
• 需要服務(wù)端運(yùn)行環(huán)境（比如Docker項(xiàng)目、全棧框架項(xiàng)目）使用Cloud Sandbox。

對(duì)于Cloud Sandbox，他底層使用亞馬遜開發(fā)的Firecracker快速啟動(dòng)輕量級(jí)的MicroVM，這也是AWS Lambda底層使用的庫。

所以，基于Cloud Sandbox啟動(dòng)的項(xiàng)目確實(shí)會(huì)占用服務(wù)端資源。具體來說，每個(gè)項(xiàng)目會(huì)分配：

• CPU：2個(gè)虛擬 CPU（vCPUs）
• 內(nèi)存：2GB
• 存儲(chǔ)：6GB

這塊是codesandbox公司的核心業(yè)務(wù)。畢竟，免費(fèi)試用滿意后，可能就會(huì)上付費(fèi)的Pro版（更多資源分配），或者團(tuán)隊(duì)定制版。商業(yè)模式與Vercel類似 —— 提供免費(fèi)基礎(chǔ)服務(wù)（自擔(dān)部分資源費(fèi)用），通過增值的云服務(wù)收費(fèi)。

而前端開發(fā)日常使用codesandbox創(chuàng)建的項(xiàng)目，大多數(shù)并不是基于Cloud Sandbox，而是基于Browser Sandbox啟動(dòng)的。這些項(xiàng)目并不會(huì)給codesandbox帶來太多服務(wù)端壓力。

兩種sandbox的區(qū)別

有個(gè)很直觀的方式區(qū)分兩種Sandbox —— 當(dāng)我們新建一個(gè)codesandbox項(xiàng)目，在預(yù)覽區(qū)域可以看到項(xiàng)目臨時(shí)url：

新開頁面，訪問這個(gè)url，如果請(qǐng)求的資源包括：

• 項(xiàng)目運(yùn)行所需的靜態(tài)資源

webpack熱更新相關(guān)代碼

那代表這是個(gè)Cloud Sandbox項(xiàng)目。Cloud Sandbox在云端啟動(dòng)后端服務(wù)與當(dāng)前頁面通信，就類似我們本地開發(fā)時(shí)起的后端服務(wù)一樣。

如果請(qǐng)求的資源包括：

• 項(xiàng)目運(yùn)行所需的靜態(tài)資源。
• sandbox初始化相關(guān)代碼。

那代表這是個(gè)Browser Sandbox項(xiàng)目。

「sandbox初始化相關(guān)代碼」是一個(gè)簡(jiǎn)化版的webpack，他會(huì)在瀏覽器執(zhí)行，下載依賴、編譯代碼，打包并執(zhí)行代碼。

我們平時(shí)使用codesandbox時(shí)看到的如下初始化畫面就代表Browser Sandbox在瀏覽器執(zhí)行相關(guān)操作。

比如，下圖是在通過CDN安裝依賴（@babel/core）：

當(dāng)依賴安裝完成后，下面是編譯代碼：

Browser Sandbox實(shí)現(xiàn)原理

Browser Sandbox相關(guān)代碼都是開源的，讓我們按照抽象程度從上往下介紹他。

首先是封裝最完整的庫 —— @codesandbox/sandpack-react。這個(gè)React庫提供了很多開箱即用的codesandbox模塊。

比如：

• SandPackCodeEditor：codesandbox左側(cè)的代碼編輯區(qū)域，底層采用的是codemirror[2]這個(gè)代碼編輯器。
• SandpackConsole：codesandbox中的控制臺(tái)。
• SandackPreview：codesandbox右側(cè)的預(yù)覽區(qū)域，會(huì)渲染一個(gè)iframe，iframe的地址對(duì)應(yīng)了Browser Sandbox的執(zhí)行環(huán)境。

各個(gè)組件通過postMessage與SandackPreview渲染的iframe交互。

我們會(huì)發(fā)現(xiàn)，codesandbox的核心實(shí)際上包含三部分內(nèi)容：

• 各種編輯器相關(guān)模塊的實(shí)現(xiàn)（比如代碼編輯部分、控制臺(tái)、預(yù)覽）。
• Browser Sandpack運(yùn)行環(huán)境，是一個(gè)獨(dú)立的網(wǎng)頁，在預(yù)覽模塊(SandackPreview)中通過iframe渲染。
• 1與2之間通信的協(xié)議（即頁面與iframe之間的通信協(xié)議）。

@codesandbox/sandpack-react實(shí)現(xiàn)了1，他依賴的@codesandbox/sandpack-client[3]實(shí)現(xiàn)了3。

2相關(guān)的源代碼在codesandbox-client/packages/app[4]中。將這個(gè)包的代碼部署上線后，就能獲得一個(gè)Browser Sandpack運(yùn)行環(huán)境。

上面已經(jīng)簡(jiǎn)單介紹了Browser Sandpack的工作原理，再將他（2）與1、3結(jié)合起來的工作原理如下：

比如，用戶選擇React作為項(xiàng)目模版：

編輯項(xiàng)目代碼后，項(xiàng)目代碼與preset（類似webpack中的preset選項(xiàng)項(xiàng)，不同模版對(duì)應(yīng)不同preset）會(huì)通過通信協(xié)議傳遞給Browser Sandpack頁面。

Browser Sandpack頁面通過內(nèi)置的mini webpack與其他工具（比如babel），編譯并執(zhí)行代碼。

代碼編譯、執(zhí)行的信息也會(huì)通過通信協(xié)議傳遞回各個(gè)需要的模塊。比如，控制臺(tái)模塊可以根據(jù)type為console的信息打印消息。

總結(jié)

codesandbox有兩種代碼運(yùn)行環(huán)境：

• Browser Sandpack：針對(duì)「編譯與執(zhí)行都能在瀏覽器完成」的純前端項(xiàng)目。
• Cloud Sandpack：針對(duì)需要服務(wù)端運(yùn)行環(huán)境的項(xiàng)目。

這兩種環(huán)境會(huì)體現(xiàn)為一個(gè)獨(dú)立網(wǎng)站，這個(gè)網(wǎng)站會(huì)作為iframe嵌入在codesandbox編輯器的預(yù)覽模塊中。

預(yù)覽模塊通過定義好的通信協(xié)議與其他模塊（比如代碼編輯模塊、控制臺(tái)模塊）通信。

對(duì)于Cloud Sandpack，會(huì)占用一定服務(wù)端資源。對(duì)于Browser Sandpack，則不會(huì)占用什么服務(wù)端資源，因?yàn)樗蟛糠诌壿嫸际窃谇岸藞?zhí)行的。

參考資料

[1]leetcode:https://leetcode.cn/problems/two-sum/。

[2]codemirror:https://codemirror.net/。

[3]@codesandbox/sandpack-client:https://www.npmjs.com/package/@codesandbox/sandpack-client。

[4]codesandbox-client/packages/app:https://github.com/codesandbox/codesandbox-client/tree/master/packages/app。