大家好，我卡颂。

codesandbox是前端工程师常常应用的代码在线运行环境，页面如下：

他的利用场景很广，比方：

  • 有代码逻辑要分享，分享个codesandbox链接
  • 有新想法须要验证，又不想本地起个我的项目，用codesandbox
  • 技术文档演示Demo，用codesandbox

作为一个在线运行代码的编辑器，这么多人天天收费用，他服务器扛得住么？

毕竟，同样作为在线代码运行环境（次要是跑算法题）的leetcode，如果同时刷题的人多了，提交后都还得排队：

codesandbox是如何实现的？他会面临leetcode一样的服务器压力么？

欢送围观朋友圈、退出人类高质量前端交换群，带飞

codesandbox的分类

这个问题的实质其实是问 —— 用户在codesandbox中写的代码，到底是在前端还是后端编译成动态资源的？毕竟，如果是在后端实现，会减少服务器压力。

比方，对于上面这段React代码：

// main.jsximport { createRoot } from "react-dom/client";import { Cpn } from "./Cpn";function App() {  return (    <Cpn />  );}createRoot(document.getElementById("root")).render(<App />);

要想在浏览器中运行，波及几个前置工作：

  1. 须要编译JSX语法，比方将<App/>编译为_jsx(App, {})
  2. 须要解析并提前下载所有依赖，比方这里的react-dom、react包
  3. 须要解析模块依赖关系，比方main.jsx导入了Cpn.jsx中的Cpn组件。对于不反对ESM的浏览器，须要将代码打包。对于反对ESM的浏览器，须要解决引入门路
  4. 如果波及到其余资源，比方图片、文字、HTML文件，须要有相应的解决

上述工作，codesandbox是在浏览器还是服务器实现的呢？

在这个例子中，这些工作都能在浏览器实现，比方：

  • 对于所有第三方依赖，能够在浏览器中间接申请CDN
  • 波及编译的工作（比方编译JSX、模块依赖剖析），实质其实是字符串的解析，能够用浏览器版本的babel实现

下面的例子是一个纯前端的React我的项目。但有些依赖服务端环境的我的项目没法采纳上述形式运行，比方：

  • 应用了Docker的我的项目
  • 相似Next.js这样的全栈我的项目

这种状况就须要一个实在的服务端环境。

两者的区别能够用下图概括：

  • 纯前端我的项目：编译与执行都能在浏览器实现
  • 全栈我的项目：我的项目编译在服务端进行，浏览器负责我的项目执行

他们别离对应codesandbox的两种运行环境：

  • Browser Sandbox：基于浏览器的本地运行环境
  • Cloud Sandbox：基于MicroVM的云端运行环境

当咱们通过模板创立codesandbox我的项目时，能够通过右上角是否有Cloud标记辨别两者：

能够发现：

  • 纯前端我的项目（比方React我的项目、纯JS我的项目）应用Browser Sandbox
  • 须要服务端运行环境（比方Docker我的项目、全栈框架我的项目）应用Cloud Sandbox

对于Cloud Sandbox，他底层应用亚马逊开发的Firecracker疾速启动轻量级的MicroVM，这也是AWS Lambda底层应用的库。

所以，基于Cloud Sandbox启动的我的项目的确会占用服务端资源。具体来说，每个我的项目会调配：

  • CPU：2个虚构 CPU（vCPUs）
  • 内存：2GB
  • 存储：6GB

这块是codesandbox公司的外围业务。毕竟，收费试用称心后，可能就会上付费的Pro版（更多资源分配），或者团队定制版。商业模式与Vercel相似 —— 提供收费根底服务（自担局部资源费用），通过增值的云服务免费。

而前端开发日常应用codesandbox创立的我的项目，大多数并不是基于Cloud Sandbox，而是基于Browser Sandbox启动的。这些我的项目并不会给codesandbox带来太多服务端压力。

两种sandbox的区别

有个很直观的形式辨别两种Sandbox —— 当咱们新建一个codesandbox我的项目，在预览区域能够看到我的项目长期url：

新开页面，拜访这个url，如果申请的资源包含：

  • 我的项目运行所需的动态资源
  • webpack热更新相干代码

那代表这是个Cloud Sandbox我的项目。Cloud Sandbox在云端启动后端服务与以后页面通信，就相似咱们本地开发时起的后端服务一样。

如果申请的资源包含：

  • 我的项目运行所需的动态资源
  • sandbox初始化相干代码

那代表这是个Browser Sandbox我的项目。

sandbox初始化相干代码是一个简化版的webpack，他会在浏览器执行，下载依赖、编译代码，打包并执行代码。

咱们平时应用codesandbox时看到的如下初始化画面就代表Browser Sandbox在浏览器执行相干操作。

比方，下图是在通过CDN装置依赖（@babel/core）：

当依赖装置实现后，上面是编译代码：

Browser Sandbox实现原理

Browser Sandbox相干代码都是开源的，让咱们依照形象水平从上往下介绍他。

首先是封装最残缺的库 —— @codesandbox/sandpack-react。这个React库提供了很多开箱即用的codesandbox模块。

比方：

  • SandPackCodeEditor：codesandbox左侧的代码编辑区域，底层采纳的是codemirror这个代码编辑器
  • SandpackConsole：codesandbox中的控制台
  • SandackPreview：codesandbox右侧的预览区域，会渲染一个iframe，iframe的地址对应了Browser Sandbox的执行环境

各个组件通过postMessage与SandackPreview渲染的iframe交互。

咱们会发现，codesandbox的外围实际上蕴含三局部内容：

  1. 各种编辑器相干模块的实现（比方代码编辑局部、控制台、预览）
  2. Browser Sandpack运行环境，是一个独立的网页，在预览模块(SandackPreview)中通过iframe渲染
  3. 1与2之间通信的协定（即页面与iframe之间的通信协议）

@codesandbox/sandpack-react实现了1，他依赖的@codesandbox/sandpack-client实现了3。

2相干的源代码在codesandbox-client/packages/app中。将这个包的代码部署上线后，就能取得一个Browser Sandpack运行环境。

下面曾经简略介绍了Browser Sandpack的工作原理，再将他（2）与1、3联合起来的工作原理如下：

比方，用户抉择React作为我的项目模版：

编辑我的项目代码后，我的项目代码与preset（相似webpack中的preset选项项，不同模版对应不同preset）会通过通信协议传递给Browser Sandpack页面。

Browser Sandpack页面通过内置的mini webpack与其余工具（比方babel），编译并执行代码。

代码编译、执行的信息也会通过通信协议传递回各个须要的模块。比方，控制台模块能够依据type为console的信息打印消息。

总结

codesandbox有两种代码运行环境：

  • Browser Sandpack：针对编译与执行都能在浏览器实现的纯前端我的项目
  • Cloud Sandpack：针对须要服务端运行环境的我的项目

这两种环境会体现为一个独立网站，这个网站会作为iframe嵌入在codesandbox编辑器的预览模块中。

预览模块通过定义好的通信协议与其余模块（比方代码编辑模块、控制台模块）通信。

对于Cloud Sandpack，会占用肯定服务端资源。对于Browser Sandpack，则不会占用什么服务端资源，因为他大部分逻辑都是在前端执行的。

这篇文章只有介绍了理念层面的常识，如果想深刻理解Browser Sandpack的实现原理，能够看看搭建一个属于本人的在线 IDE，写的很具体。