mirror of https://github.com/halo-dev/halo-admin
perf: asynchronously load the emoji data of the comment reply component (#798)
#### What type of PR is this? /kind improvement #### What this PR does / why we need it: 优化评论回复组件的 emoji 数据加载,改为异步的方式。 构建结果对比: 优化前: <img width="475" alt="image" src="https://user-images.githubusercontent.com/21301288/209430764-25e42624-25d7-4466-a184-4fc82d310e12.png"> 优化后: <img width="473" alt="image" src="https://user-images.githubusercontent.com/21301288/209430752-1bc064e5-f3bd-42f4-b93c-8f2e200a00e3.png"> 首次请求对比: 优化前: <img width="1067" alt="image" src="https://user-images.githubusercontent.com/21301288/209430904-79c9c403-a627-44ea-a97b-13e653230b23.png"> 优化后: <img width="1066" alt="image" src="https://user-images.githubusercontent.com/21301288/209430936-e446659c-a20a-437c-bd9f-4408279410af.png"> 最终会在打开 emoji 组件的时候才加载 emoji 数据: <img width="1460" alt="image" src="https://user-images.githubusercontent.com/21301288/209430963-f2cb66c6-c0e3-4cc5-8906-66db94d40ca8.png"> #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/3039 #### Special notes for your reviewer: 测试方式: 1. 检查回复组件的 Emoji 选择功能是否正常即可。 #### Does this PR introduce a user-facing change? ```release-note Console 端的评论回复 Emoji 组件数据改为异步加载,优化整体的加载性能。 ```pull/799/head
parent
5d45e9577e
commit
b29a72d7a5
|
@ -14,7 +14,6 @@ import type {
|
||||||
} from "@halo-dev/api-client";
|
} from "@halo-dev/api-client";
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import { Picker } from "emoji-mart";
|
import { Picker } from "emoji-mart";
|
||||||
import data from "@emoji-mart/data";
|
|
||||||
import i18n from "@emoji-mart/data/i18n/zh.json";
|
import i18n from "@emoji-mart/data/i18n/zh.json";
|
||||||
import { computed, nextTick, ref, watch, watchEffect } from "vue";
|
import { computed, nextTick, ref, watch, watchEffect } from "vue";
|
||||||
import { reset } from "@formkit/core";
|
import { reset } from "@formkit/core";
|
||||||
|
@ -120,7 +119,10 @@ const emojiPickerRef = ref<HTMLElement | null>(null);
|
||||||
|
|
||||||
const handleCreateEmojiPicker = () => {
|
const handleCreateEmojiPicker = () => {
|
||||||
const emojiPicker = new Picker({
|
const emojiPicker = new Picker({
|
||||||
data: data,
|
data: async () => {
|
||||||
|
const data = await import("@emoji-mart/data");
|
||||||
|
return Object.assign({}, data);
|
||||||
|
},
|
||||||
theme: "light",
|
theme: "light",
|
||||||
autoFocus: true,
|
autoFocus: true,
|
||||||
i18n: i18n,
|
i18n: i18n,
|
||||||
|
|
Loading…
Reference in New Issue