perf(frontend): サーバーにカスタム絵文字の種類が多い場合のパフォーマンスの改善

Resolve #10925

CHANGELOG.md

@@ -32,6 +32,7 @@
 - ハッシュタグのノート一覧ページから、そのハッシュタグで投稿するボタンを追加
 - アカウント初期設定ウィザードに戻るボタンを追加
 - アカウントの初期設定ウィザードにあとでボタンを追加
+- サーバーにカスタム絵文字の種類が多い場合のパフォーマンスの改善
 - Fix: URLプレビューで情報が取得できなかった際の挙動を修正
 - Fix: Safari、Firefoxでの新規登録時、パスワードマネージャーにメールアドレスが登録されていた挙動を修正
 - Fix: ロールタイムラインが無効でも投稿が流れてしまう問題の修正

packages/frontend/src/components/MkEmojiPicker.vue

@@ -101,7 +101,7 @@ import { isTouchUsing } from '@/scripts/touch';
 import { deviceKind } from '@/scripts/device-kind';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
-import { customEmojiCategories, customEmojis } from '@/custom-emojis';
+import { customEmojiCategories, customEmojis, customEmojisMap } from '@/custom-emojis';
 import { $i } from '@/account';
 
 const props = withDefaults(defineProps<{
@@ -337,7 +337,7 @@ function done(query?: string): boolean | void {
 	if (query == null || typeof query !== 'string') return;
 
 	const q2 = query.replace(/:/g, '');
-	const exactMatchCustom = customEmojis.value.find(emoji => emoji.name === q2);
+	const exactMatchCustom = customEmojisMap.get(q2);
 	if (exactMatchCustom) {
 		chosen(exactMatchCustom);
 		return true;

packages/frontend/src/components/global/MkCustomEmoji.vue

@@ -7,7 +7,7 @@
 import { computed } from 'vue';
 import { getProxiedImageUrl, getStaticImageUrl } from '@/scripts/media-proxy';
 import { defaultStore } from '@/store';
-import { customEmojis } from '@/custom-emojis';
+import { customEmojisMap } from '@/custom-emojis';
 
 const props = defineProps<{
 	name: string;
@@ -26,7 +26,7 @@ const rawUrl = computed(() => {
 		return props.url;
 	}
 	if (isLocal.value) {
-		return customEmojis.value.find(x => x.name === customEmojiName.value)?.url ?? null;
+		return customEmojisMap.get(customEmojiName.value)?.url ?? null;
 	}
 	return props.host ? `/emoji/${customEmojiName.value}@${props.host}.webp` : `/emoji/${customEmojiName.value}.webp`;
 });

packages/frontend/src/custom-emojis.ts

-import { shallowRef, computed, markRaw } from 'vue';
+import { shallowRef, computed, markRaw, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import { api, apiGet } from './os';
 import { useStream } from '@/stream';
@@ -16,6 +16,14 @@ export const customEmojiCategories = computed<[ ...string[], null ]>(() => {
 	return markRaw([...Array.from(categories), null]);
 });
 
+export const customEmojisMap = new Map<string, Misskey.entities.CustomEmoji>();
+watch(customEmojis, emojis => {
+	customEmojisMap.clear();
+	for (const emoji of emojis) {
+		customEmojisMap.set(emoji.name, emoji);
+	}
+}, { immediate: true });
+
 // TODO: ここら辺副作用なのでいい感じにする
 const stream = useStream();