From 15414e4ce58e447a696d17a0ce12b238cad8bd61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?sugar=F0=9F=8D=AC=F0=9F=8D=AD=F0=9F=8F=B3=EF=B8=8F?=
 =?UTF-8?q?=E2=80=8D=E2=9A=A7=EF=B8=8F?=
 <168804988+sugar700@users.noreply.github.com>
Date: Fri, 17 Jan 2025 15:21:08 +0100
Subject: [PATCH] perf: dynamically load audio visualizer (MisskeyIO#912)

audio visualizer weights 475 kB by itself, and audio files are
relatively rare on timelines, so it makes sense to load it only when
it's necessary
---
 packages/frontend/src/components/MkMediaAudio.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index 770c1107c..76cc89a26 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -79,7 +79,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, watch, computed, ref, onDeactivated, onActivated, onMounted } from 'vue';
+import { shallowRef, watch, computed, ref, onDeactivated, onActivated, onMounted, defineAsyncComponent } from 'vue';
 import * as Misskey from 'misskey-js';
 import type { MenuItem } from '@/types/menu.js';
 import { defaultStore } from '@/store.js';
@@ -87,11 +87,11 @@ import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import bytes from '@/filters/bytes.js';
 import { hms } from '@/filters/hms.js';
-import MkAudioVisualizer from '@/components/MkAudioVisualizer.vue';
 import MkMediaRange from '@/components/MkMediaRange.vue';
 import { pleaseLogin } from '@/scripts/please-login.js';
 import { $i, iAmModerator } from '@/account.js';
 
+const MkAudioVisualizer = defineAsyncComponent(() => import('@/components/MkAudioVisualizer.vue'));
 const props = defineProps<{
 	audio: Misskey.entities.DriveFile;
 	user?: Misskey.entities.UserLite;