记一次webpack优化记录-主要优化monacoEditor编辑器

先说一下 monaco。什么、monaco？好吧，我们换个名字，vscode 浏览器端的线上 Ide。强大得代码提示，统一的编码风格，的确让我觉得很。把 ide 植入我开发的可视化搭建 ide 的时候，我吐了，整整 15Mb 的包，webpack 打包瞬间内存溢出，就算强行扩内存，整个打包过程也要持续个 2 - 5 分钟。

必须优化，说干就干。开始正文

webpack 引入 externals。嗯？2020 年了，你还不懂 webpack？请移步 https://www.webpackjs.com/con…

externals 必须找到 cdn 文件，但是当你打开 monaco 官网。cdn？什么 cdn？https://microsoft.github.io/m…。全篇只有 api 没有 cdn。好吧，我自己取，在官方示例中寻找整个 cdn 引入最终找到

好了，万事大吉。嗯？卧槽，代码提示功能没有了，在官方示例中是有的。庆幸在试了几次后找到有效代码

require.config({paths: { 'vs': 'https://unpkg.alibaba-inc.com/monaco-editor@0.20.0/min/vs'}});

      // Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
      // the default worker url location (used when creating WebWorkers). The problem here is that
      // HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
      // a web worker through a same-domain script
      window.MonacoEnvironment = {getWorkerUrl: function(workerId, label) {
          return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
            self.MonacoEnvironment = {baseUrl: 'https://unpkg.alibaba-inc.com/monaco-editor@0.20.0/min/'};
            importScripts('https://unpkg.alibaba-inc.com/monaco-editor@0.20.0/min/vs/base/worker/workerMain.js');`
          )}`;
        }
      };

      require(["vs/editor/editor.main"], function () {// ...});

全局引入即可

依然要自己封装 monaco