editor icon indicating copy to clipboard operation
editor copied to clipboard

直接引入 @umoteam/editor 包,打包后,整体体积巨大,接近10MB,该如何正确配置可以减小整体包体积

Open Eurkidu opened this issue 2 months ago • 0 comments

项目内通过异步组件独立加载 @umoteam/editor

// 异步加载 UmoEditor 组件
const UmoEditor = defineAsyncComponent({
  loader: () => import('@umoteam/editor').then((m) => m.UmoEditor),
  timeout: 30000,
})

打包之后,会独立分包,可以看到体积有 9719.58kb,gzip 之后都有 2690.92kb,导致线上编辑器加载非常慢

Image

通过 rollup-plugin-visualizer 分析打包文件,如下图

Image

里面包含了 pdfjs, onnxruntime-web, echarts, mermaid 等大量三方库全量引入

问题 #363 里面有提到打包完之后只有 2MB,我想请问下如何配置能做到整体引入包大小在 2MB 左右,现在有 10MB 太大了,加载太慢

当前编辑器已经通过 disableExtensions 禁用了大量功能,比如 echarts 功能,那为什么还会打包 echarts js 文件,如何配置可以不加载

const options: Ref<UmoEditorOptions> = ref({
  fullscreenZIndex: 1000,
  page: {
    layouts: ['web'],
    defaultMargin: {
      left: 2,
      right: 1,
      top: 0.5,
      bottom: 0.5,
    },
    showBreakMarks: false,
  },
  toolbar: {
    defaultMode: 'classic',
    menus: ['base', 'insert', 'table', 'page'],
  },
  disableExtensions: [
    'task-list',
    'select-all',
    'import-word',
    'markdown',
    'viewer',
    'print',
    'link',
    'video',
    'audio',
    'file',
    'symbol',
    'chineseDate',
    'emoji',
    'math',
    'tag',
    'columns',
    'callout',
    'mention',
    'bookmark',
    'option-box',
    'hard-break',
    'text-box',
    'template',
    'web-page',
    'qrcode',
    'barcode',
    'signature',
    'seal',
    'diagrams',
    'echarts',
    'mermaid',
    'chinese-case',
    'watermark',
    'background',
    'preview',
    'export-image',
    'export-pdf',
    'export-text',
    'share',
    'embed',
  ],
} satisfies UmoEditorOptions)

Eurkidu avatar Nov 13 '25 13:11 Eurkidu