196 - 《Monaco Editor 的正确用法》

主要应该就 3 个方案。

1、monaco-editor（周下载 540K） + monaco-editor-webpack-plugin（周下载 184K）
2、基于 1，使用 react-monaco-editor（周下载 93K）
3、使用 @monaco-editor/react（周下载 212K）

1 是官方方案，需要配套的 webpack 插件一起使用，缺点是配置麻烦、构建和热更慢、更新时需要同步更新 webpack 插件和 monaco-editor 本身、需要自己实现 react 封装、页面加载慢；2 是在 1 的基础上加了 react 的组件封装，同样需要配套的 webpack 插件；3 不仅是 react 封装，还有一套 loader 机制，动态加载 monaco-editor 而无需官方 webpack 插件，monaco-editor 的文件可以通过 copy-webpack-plugin 复制，也可以直接引 cdn 上的，优点是可以解 1 的缺点。

我分别用 1 和 3 方案建了个项目进行对比。

上图是模拟 Fast 3G 下页面加载速度的对比，3（左）相比 1（右）在下载量、load 时间都相小地多和快地多。

方案	下载量	load 时间
3（左）	12.8M	6.24s
1（右）	25.9M	15.92s

上图是 build 速度的对比。