mirror of https://github.com/halo-dev/halo
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"> 最终会在打开文章编辑页面的时候加载编辑器资源:  > 这个 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
parent
b46b003283
commit
fb1465484a
|
@ -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",
|
||||
},
|
||||
]);
|
||||
|
|
Loading…
Reference in New Issue