From b29a72d7a55878671a040654850fbe91afbcec9c Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 26 Dec 2022 14:20:32 +0800
Subject: [PATCH] perf: asynchronously load the emoji data of the comment reply
 component (#798)
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:

优化评论回复组件的 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 组件数据改为异步加载，优化整体的加载性能。
```
---
 .../contents/comments/components/ReplyCreationModal.vue     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/modules/contents/comments/components/ReplyCreationModal.vue b/src/modules/contents/comments/components/ReplyCreationModal.vue
index 6d4ecff7..5e69f503 100644
--- a/src/modules/contents/comments/components/ReplyCreationModal.vue
+++ b/src/modules/contents/comments/components/ReplyCreationModal.vue
@@ -14,7 +14,6 @@ import type {
 } from "@halo-dev/api-client";
 // @ts-ignore
 import { Picker } from "emoji-mart";
-import data from "@emoji-mart/data";
 import i18n from "@emoji-mart/data/i18n/zh.json";
 import { computed, nextTick, ref, watch, watchEffect } from "vue";
 import { reset } from "@formkit/core";
@@ -120,7 +119,10 @@ const emojiPickerRef = ref<HTMLElement | null>(null);
 
 const handleCreateEmojiPicker = () => {
   const emojiPicker = new Picker({
-    data: data,
+    data: async () => {
+      const data = await import("@emoji-mart/data");
+      return Object.assign({}, data);
+    },
     theme: "light",
     autoFocus: true,
     i18n: i18n,