perf: asynchronously load the default editor (halo-dev/console#800)

#### What type of PR is this?

/kind improvement

#### What this PR does / why we need it:

默认编辑器改为异步的形式加载。

优化前后对比:

优化前编译:

<img width="480" alt="image" src="https://user-images.githubusercontent.com/21301288/209529091-07216f42-8668-46fc-80e6-03db5504e576.png">

优化后编译:

<img width="510" alt="image" src="https://user-images.githubusercontent.com/21301288/209529001-31537104-cada-4e3c-b521-8849b53281ce.png">

优化前首次加载:

<img width="1069" alt="image" src="https://user-images.githubusercontent.com/21301288/209529285-a62cfe92-5aa0-47f6-ad7e-9f0210ca97b6.png">

优化后首次加载:

<img width="1067" alt="image" src="https://user-images.githubusercontent.com/21301288/209529349-24aa99b9-5b52-4d44-8144-60028332e9cd.png">

最终会在打开文章编辑页面的时候加载编辑器资源:

![2022-12-26 17 06 45](https://user-images.githubusercontent.com/21301288/209529486-d579b51c-cb14-4a30-a3be-649bfe284300.gif)

> 这个 Gif 的演示做了节流处理来模拟服务器带宽的情况。在带宽不良的情况下会显示加载动画以提示使用者正在加载编辑器。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/3047

#### Special notes for your reviewer:

测试方式:

1. 插件默认编辑器是否正常加载以及功能是否正常即可。

#### Does this PR introduce a user-facing change?

```release-note
Console 端的默认编辑器改为异步加载,优化整体的加载性能。
```
pull/3445/head
Ryan Wang 2022-12-26 21:34:32 +08:00 committed by GitHub
parent b46b003283
commit fb1465484a
1 changed files with 7 additions and 3 deletions

View File

@ -1,7 +1,7 @@
import DefaultEditor from "@/components/editor/DefaultEditor.vue";
import { usePluginModuleStore } from "@/stores/plugin";
import type { EditorProvider, PluginModule } from "@halo-dev/console-shared";
import { markRaw, onMounted, ref, type Ref } from "vue";
import { onMounted, ref, type Ref, defineAsyncComponent } from "vue";
import { VLoading } from "@halo-dev/components";
interface useEditorExtensionPointsReturn {
editorProviders: Ref<EditorProvider[]>;
@ -15,7 +15,11 @@ export function useEditorExtensionPoints(): useEditorExtensionPointsReturn {
{
name: "default",
displayName: "默认编辑器",
component: markRaw(DefaultEditor),
component: defineAsyncComponent({
loader: () => import("@/components/editor/DefaultEditor.vue"),
loadingComponent: VLoading,
delay: 200,
}),
rawType: "HTML",
},
]);