背景

公司产品需要实现代码编辑、调试等功能，引入 @monaco-editor/react来实现。

原因及问题追踪

用户使用调试或查看业务代码时，打开耗时过久。体验不好。

问题原因：

第一次加载编辑器组件时，会调用网络资源。

组件中使用的资源是cdn资源

解决思路及方案

思路：将资源放置本地，替换cdn资源

查看官网给的解决方案

查看自己使用的组件版本是4.4.5

果断采取第二种把monaco-editor作为npm包的解决方案。

代码中添加

import * as monaco from 'monaco-editor';
import { loader } from '@monaco-editor/react';

loader.config({ monaco });

验证

使用功能打开文件，加载本地资源。加载飞快，体验顺滑。

感悟

虽然官网有解决方案，但是本着实用功能主义，在没有使用到该功能就不会想着去优化，也不会知道还有这样的解决方案。

用户提出的需求，大体上不是为了让你完成某功能的，而是完美某功能的。

世上没有完美的功能，但能向着完美的方向去做，就是不断趋于完美的过程。