@monaco-editor/react组件CDN加载慢如何解决？

背景

我相信很多业务场景是需要用到代码编辑器的，而使用最多的当属vs-code，而vs-code官方推出了你npm插件：@monaco-editor，通过它可以快速集成到系统中。

问题

@monaco-editor/react实际上是基于@monaco-editor的React版本的封装，使用起来比@monaco-editor更加简单，但是集成以后，很多人会发现一个问题，就是编辑器加载非常慢，这是为什么？

分析

1. 点击编辑器以后，发现都是远程文件加载

2. 选择其中一个文件，查看访问地址

我们会发现这个地址是国外的js分发平台，也是远程的cdn，这个地址在哪儿配置的？

打开插件，找到loader/lib/es/config/index.js，就能看到远程的配置地址，所以jsdelivery在国内加载是非常慢的，如何解决？

官方解决办法

官方提供了两个方法

npm文档地址：www.npmjs.com/package/@mo...

1. 通过loader配置，修改cdn

注意：这种方式要求@monaco-editor/react的版本在v4.4以上，大家使用npm下载最新版本即可。

2. 通过loader直接把官方插件加载进去

注意：这种方式是本地加载，相当于把整个官方插件打包到项目中，这种方式加载编辑器比较快，只是本地启动会慢一些。

推荐解决办法

官方提供了2种，看上去第二种更好，但是第二种会出现各种各样的问题，官方也说明了，第二种方式，需要结合webpack插件使用，比如： www.npmjs.com/package/mon...

但是，这种方式跟项目环境（vite/cli/cra）和webpack的版本有很大关系，所以，相当一部分人会因此报错。

那我还是继续推荐官方的第一种cdn语法，我们只需要修改远程地址为本地的cdn即可，那如何修改？

解决办法

1. 去官网下载完整的插件包

下载地址：www.jsdelivr.com/package/npm...

2. 找到对应的vs目录

3. 把这个目录传到本地根目录

• 一般根目录是public，当然不同的项目，有所区别。
• 如果公司有cdn，也可以把这个目录传到公司cdn上面去。

4. 使用本地访问或者cdn域名，保证可以访问到loader.js

• 如果是本地public目录，那本地启动项目的时候，就是：http://localhost:8080/vs/loader.js
• 如果是公司cdn，那就是远程访问：xxx.com/vs/loader.j...
• 如果是本地开发完，部署到服务器以后，那就是使用服务器域名访问。

总之，你需要保证能够访问到loader.js

5. 修改远程地址

import Editor, { loader } from '@monaco-editor/react';
export default function LoadEditor(){
    useEffect(() => {
        loader.config({
          paths: {
            vs: 'https://xxx.com/vs',
          },
        });
    }, []);
    return <Editor
        height="calc(100vh - 115px)"
        language="css"
        theme="vs-light"
        defaultValue={'// 这是代码'}
        defaultLanguage="css"
        options={{
          lineNumbers: 'on',
          minimap: {
            enabled: false,
          },
        }}
    />
}

6. 从新启动项目

启动以后，你会发现点击编辑，加载的地址会变成本地地址。

温馨提示：如果有条件，还是建议用公司cdn，这样访问速度会很快。