这么多人用Codesandbox，他服务器扛得住么？ _Codesandbox

Codesandbox是如何实现的？他会面临leetcode一样的服务器压力么？这个问题的本质其实是问 —— 用户在Codesandbox中写的代码，究竟是在前端还是后端编译成静态资源的？毕竟，如果是在后端完成，会增加服务器压力。

文章插图
大家好，我卡颂。
codesandbox是前端工程师经常使用的「代码在线运行环境」，页面如下：
【这么多人用Codesandbox，他服务器扛得住么？】

文章插图
他的应用场景很广，比如：

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

作为一个在线运行代码的编辑器，这么多人天天免费用，他服务器扛得住么？
毕竟，同样作为在线代码运行环境（主要是跑算法题）的leetcode[1]，如果同时刷题的人多了，提交后都还得排队：

文章插图
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 />);

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

需要编译JSX语法，比如将<App/>编译为_jsx(App, {}) 。
需要解析并提前下载所有依赖，比如这里的react-dom、react包。
需要解析模块依赖关系，比如main.jsx导入了Cpn.jsx中的Cpn组件。对于不支持ESM的浏览器，需要将代码打包。对于支持ESM的浏览器，需要处理引入路径。
如果涉及到其他资源，比如图片、文字、html文件，需要有相应的处理。

上述工作，codesandbox是在浏览器还是服务器完成的呢？
在这个例子中，这些工作都能在浏览器完成，比如：