起因

因为工作需要，我需要和我的学员在钉钉上面分享代码。

当有人给我分享了一段代码后，我得把这段代码拷贝下来，然后在本地创建一个 HTML 文件跑起来，才能看到效果。相当麻烦。

我在想怎么样能够一键分享代码呢？

于是我花了一天时间在网站上增加了一个代码分享的功能。

长下面这样：

然后学员只需要发送给我一个链接，我就可以直接在浏览器里面打开，并且立马可以调试和预览效果。

一切似乎很顺利，但是过了几天，学员告诉我他打开这个页面的时候，编辑器加载非常久。

编辑器是使用 Monaco Editor 开发的。很久之前我也碰到过 Monaco Editor 加载非常慢的情况，原因就是 CDN 的锅，不使用 CDN 就可以了。

在 React 中怎么使用 Monaco Editor？

通常有两种方案，一是使用官方包自己折腾。monaco-editor。这种做法必须使用编译插件，比较麻烦，而且 API 也不好用，不推荐这种做法。

二是使用 monaco 官方维护的 @monaco-editor/react，用法非常简单。

为什么用到了 CDN？

nonaco-editor/react 并没有将 monaco-editor 作为 peer 依赖，也没有把 monaco-editor 打包到源代码里。它采用的做法是通过 CDN 去加载打包好的 monaco-editor。

nonaco-editor/react 提供了 loader 方法，我们可以传递一个 config 方法，来指定 monaco 对象的来源。

它有一段默认的配置，我们可以对他进行修改。

const config = {
  paths: {
    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs',
  },
}
export default config;

这段配置就是从 jsdelivr 上面加载 CDN。

如何避免 CDN？

避免 CDN 非常简单。

把 monaco-editor 安装到本地，并且配置 loader 的 config 就可以了。

import * as monaco from "monaco-editor";
import { loader } from "@monaco-editor/react";
loader.config({ monaco });

服务端渲染？monaco 该怎么办？

以上方法在没有服务端渲染的情况下可以用。

但是 monaco-editor 不支持服务端渲染。

比如我使用 blitz 框架，它底层是 nextjs，属于服务端框架。这时也有办法，可以动态加载。

import dynamic from "next/dynamic";
const MonacoEditor = dynamic(import("react-monaco-editor"), { ssr: false });

在很早之前这样用是没问题的，我也这么用过，但是现在不行了。

Nextjs 不支持第三方包中导入 css，该怎么办？

monaco 导入了第三方 css。

但是 Nextjs 不支持第三方包中导入 css，官方文档有说明： CSS Imported by a Dependency。

也有很多人提了 issues，讨论比较多的是：issues 19936，维护者针对这个 issues 开了一个 RFC: Global CSS Imports #27953。但是目前仍然没有结论。

在这个问题彻底解决之前，可以使用 next-global-css。

但是必须把 nextjs 的编译工具从 SWC 切换到 webpack。

最新版本的 Nextjs 现在还有办法这么玩吗？

切换到 webpack 很简单，只需要添加一行配置就可以了。

const config = {
  webpack: (config, options) => {
    config.plugins.push(newMonacoWebpackPlugin())
    returnconfig
  }
}

由于 monaco 必须使用 monaco-editor-webpack-plugin 这个 webpack 插件。

而这个插件必须运行在 webpack 4 版本中。原来有个 webpack5 配置项，把它设置为 false 就可以使用。

但是最新版 nextjs 不支持 webpack4 了，只支持 webpack5。

所以这个方法也不能用了。

怎么样把 jsdelivr 上面的代码下载下来？

于是我又想到，能不能把 CDN 代码下载到本地来用呢？

MonacoEditor 在 jsdelivr 上的地址：cdn.jsdelivr.net/npm/monaco-…。

可是我发现它没有办法一键下载。恰巧 Monaco 的文件实在太多了，上百个，我逐一复制不知道要到什么时候。

于是我又准备搞一个工具，输入一个 url，可以一键下载该目录下所有的文件。

思路也很简单，通过 url 获取 DOM，解析 DOM，如果是文件夹则递归执行。正在我写了一半的时候，突然想到 unpkg 上面不也有 MonacoEditor 编译后的代码吗？

我又找到了 unpkg 上面 MonacoEditor 的代码地址：unpkg.com/browse/mona…。

但是 unpkg 也没有一键下载功能，我想肯定有人想过如何一键下载 unpkg 上面的文件吧？

果不其然，我在 github 上面找到了一个库：github.com/TMaize/go-u…。

当我把它下载下来，但是运行不起来的时候......

聪明反被聪明误

正当我准备回去继续写 jsdelivr 一键下载工具的时候，突然想到，我只要把 monoco editor 装到本地，node_module 里面不就有源代码了吗？

于是，我花了大概 1 分钟，搞定了。

现在 monaco editor 基本可以做到秒加载。

从一个灵感，到实现 MVP 版本非常快，但是在 MVP 版本增强用户体验的时候，就开始变复杂了。一个很简单的优化，却花了半天时间去折腾，最后发现走弯路了，正确的解法只需要 1 分钟而已。

其实我从一开始就应该想到的，只是因为自己对技术过于自信，导致错过了最佳方式，反而绕进了一个无底洞。

从这一点也可以看出，思考远比行动重要的多。