记一次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/[email protected]/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/[email protected]/min/'
            };
            importScripts('https://unpkg.alibaba-inc.com/[email protected]/min/vs/base/worker/workerMain.js');`
          )}`;
        }
      };

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

全局引入即可

依然要自己封装monaco