使用Vite构建Chrome扩展时，如何加速monaco-editor构建速度？

方案一：单独构建Monaco Editor并通过全局方法调用 #

通过将Monaco从主项目中拆分出来单独构建，让主项目仅调用全局方法初始化编辑器，彻底避免主构建流程打包Monaco代码。

• 1. 编写Monaco单独入口文件
  在项目中新建src/monaco-entry.js，负责初始化Monaco并暴露全局方法：

import * as monaco from 'monaco-editor';

// 暴露全局初始化方法，可根据需求传入配置参数
window.setupMonaco = function(containerId, options = {}) {
  const defaultOpts = {
    value: '',
    language: 'javascript',
    theme: 'vs-dark'
  };
  return monaco.editor.create(document.getElementById(containerId), {
    ...defaultOpts,
    ...options
  });
};

• 2. 修改Vite配置添加多入口构建
  在vite.config.js中配置双入口，让主项目和Monaco分别构建：

export default {
  build: {
    rollupOptions: {
      input: {
        main: './src/main.js', // 你的Chrome扩展主入口
        monaco: './src/monaco-entry.js' // Monaco单独构建入口
      }
    }
  }
};

• 3. 在扩展页面中引入构建产物
  在扩展的HTML文件（如popup.html）中，先加载单独构建的Monaco脚本，再加载主项目脚本：

<script src="./dist/monaco.js"></script>
<script src="./dist/main.js"></script>

• 4. 主项目中调用全局方法
  主项目代码无需再导入Monaco，直接调用全局方法初始化编辑器：

// 主项目代码示例
const editor = window.setupMonaco('editor-container', {
  value: 'console.log("Hello Monaco")'
});

后续仅当monaco-entry.js修改时才会重新构建Monaco部分，主项目构建时间将回到原有的0.6秒左右。

方案二：别名+环境变量替换为轻量编辑器 #

通过环境变量控制，在开发非编辑器相关功能时，用极简的模拟编辑器替换Monaco，大幅缩短构建时间。

• 1. 编写轻量模拟编辑器
  新建src/mock-editor.js，实现和Monaco一致的核心API（仅保留你需要的功能）：

// 模拟Monaco的核心create方法
export function create(container, options = {}) {
  const textarea = document.createElement('textarea');
  textarea.value = options.value || '';
  textarea.style.width = '100%';
  textarea.style.height = '100%';
  textarea.style.border = 'none';
  textarea.style.padding = '8px';
  container.appendChild(textarea);

  // 模拟Monaco的核心API
  return {
    getValue: () => textarea.value,
    setValue: (val) => textarea.value = val,
    dispose: () => textarea.remove()
  };
}

• 2. 在Vite配置中添加环境别名
  根据构建模式动态设置monaco-editor的别名：

import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
  // 自定义模式，仅在需要调试Monaco时使用
  const useRealMonaco = mode === 'build-with-monaco';
  return {
    resolve: {
      alias: {
        'monaco-editor': useRealMonaco ? 'monaco-editor' : './src/mock-editor.js'
      }
    }
  };
});

• 3. 添加npm脚本命令
  在package.json中新增两种构建命令，按需切换：

{
  "scripts": {
    "build": "vite build", // 默认用轻量编辑器构建，速度快
    "build:monaco": "vite build --mode build-with-monaco" // 需要调试Monaco时使用
  }
}

• 4. 项目中正常导入使用
  项目代码无需修改，保持原有的Monaco导入方式：

import { create } from 'monaco-editor';

const editor = create(document.getElementById('editor-container'), {
  value: 'Hello World'
});

开发非编辑器功能时用npm run build，需要调试编辑器时用npm run build:monaco即可。

内容的提问来源于stack exchange，提问作者Peter V. Mørch