From fb1465484a7c2b329cc6f2f22afe119cf5f3abb4 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 26 Dec 2022 21:34:32 +0800
Subject: [PATCH] perf: asynchronously load the default editor
 (halo-dev/console#800)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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 端的默认编辑器改为异步加载，优化整体的加载性能。
```
---
 src/composables/use-editor-extension-points.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/composables/use-editor-extension-points.ts b/src/composables/use-editor-extension-points.ts
index 70761d133..5edfe9272 100644
--- a/src/composables/use-editor-extension-points.ts
+++ b/src/composables/use-editor-extension-points.ts
@@ -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",
     },
   ]);