For AI agents: the complete documentation index is available at /vue-codemirror6/zh/llms.txt, the full documentation bundle is available at /vue-codemirror6/zh/llms-full.txt, and this page is available as Markdown at /vue-codemirror6/zh/guide/bundling.md.
vue-codemirror6
  • 简体中文

      • 打包建议

      CodeMirror 及其语言包体积相对较大。将它们拆分为独立的 chunk,可以减小主包体积,并让浏览器单独缓存编辑器部分。

      Vite

      // vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          codemirror: ['vue-codemirror6'],
          'codemirror-lang': [
            // 按需添加使用的语言。
            '@codemirror/lang-html',
            '@codemirror/lang-javascript',
            '@codemirror/lang-markdown'
          ]
        }
      }
    }
  }
});

      Rsbuild

      // rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  splitChunks: {
    cacheGroups: {
      codemirror: {
        test: /node_modules[\\/](@codemirror|codemirror|@lezer)[\\/]/,
        name: 'codemirror',
        chunks: 'all'
      }
    }
  }
});

      懒加载

      如果首屏不需要编辑器,可以异步加载:

      import { defineAsyncComponent } from 'vue';

const CodeMirror = defineAsyncComponent(() => import('vue-codemirror6'));