perf: MonacoEditor组件修改,避免全量引入

This commit is contained in:
yangmi 2022-07-24 19:43:58 +08:00
parent a4bd736a8c
commit b78a78b3a5
3 changed files with 4066 additions and 1134 deletions

5189
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@ -1,7 +1,6 @@
<template></template>
<script setup>
import * as monaco from 'monaco-editor'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'

View File

@ -1,11 +1,11 @@
import { ref, onBeforeUnmount, nextTick } from 'vue'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
import { editor } from 'monaco-editor/esm/vs/editor/editor.api.js'
export const useMonacoEditor = (language = 'javascript') => {
const designStore = useDesignStore()
let monacoEditor: monaco.editor.IStandaloneCodeEditor | null = null
let monacoEditor: editor.IStandaloneCodeEditor | null = null
let initReadOnly = false
const el = ref<HTMLElement | null>(null)
@ -25,12 +25,12 @@ const designStore = useDesignStore()
}
// 创建实例
const createEditor = (editorOption: monaco.editor.IStandaloneEditorConstructionOptions = {}) => {
const createEditor = (editorOption: editor.IStandaloneEditorConstructionOptions = {}) => {
if (!el.value) return
const javascriptModel = monaco.editor.createModel('', language)
const javascriptModel = editor.createModel('', language)
initReadOnly = !!editorOption.readOnly
// 创建
monacoEditor = monaco.editor.create(el.value, {
monacoEditor = editor.create(el.value, {
model: javascriptModel,
// 是否启用预览图
minimap: { enabled: false },