add more dynamic imports to optimize bundle

src/renderer/features/settings/components/playback/mpv-properties.ts

@@ -0,0 +1,44 @@
+import type { SettingsState } from '/@/renderer/store/settings.store';
+
+export const getMpvSetting = (
+    key: keyof SettingsState['playback']['mpvProperties'],
+    value: any,
+) => {
+    switch (key) {
+        case 'audioExclusiveMode':
+            return { 'audio-exclusive': value || 'no' };
+        case 'audioSampleRateHz':
+            return { 'audio-samplerate': value };
+        case 'gaplessAudio':
+            return { 'gapless-audio': value || 'weak' };
+        case 'replayGainClip':
+            return { 'replaygain-clip': value || 'no' };
+        case 'replayGainFallbackDB':
+            return { 'replaygain-fallback': value };
+        case 'replayGainMode':
+            return { replaygain: value || 'no' };
+        case 'replayGainPreampDB':
+            return { 'replaygain-preamp': value || 0 };
+        default:
+            return { 'audio-format': value };
+    }
+};
+
+export const getMpvProperties = (settings: SettingsState['playback']['mpvProperties']) => {
+    const properties: Record<string, any> = {
+        'audio-exclusive': settings.audioExclusiveMode || 'no',
+        'audio-samplerate':
+            settings.audioSampleRateHz === 0 ? undefined : settings.audioSampleRateHz,
+        'gapless-audio': settings.gaplessAudio || 'weak',
+        replaygain: settings.replayGainMode || 'no',
+        'replaygain-clip': settings.replayGainClip || 'no',
+        'replaygain-fallback': settings.replayGainFallbackDB,
+        'replaygain-preamp': settings.replayGainPreampDB || 0,
+    };
+
+    Object.keys(properties).forEach((key) =>
+        properties[key] === undefined ? delete properties[key] : {},
+    );
+
+    return properties;
+};

src/renderer/features/settings/components/playback/mpv-settings.tsx

@@ -2,6 +2,8 @@ import isElectron from 'is-electron';
 import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { getMpvSetting } from './mpv-properties';
+
 import { eventEmitter } from '/@/renderer/events/event-emitter';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import {
@@ -27,49 +29,6 @@ import { PlayerType } from '/@/shared/types/types';
 const localSettings = isElectron() ? window.api.localSettings : null;
 const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
 
-export const getMpvSetting = (
-    key: keyof SettingsState['playback']['mpvProperties'],
-    value: any,
-) => {
-    switch (key) {
-        case 'audioExclusiveMode':
-            return { 'audio-exclusive': value || 'no' };
-        case 'audioSampleRateHz':
-            return { 'audio-samplerate': value };
-        case 'gaplessAudio':
-            return { 'gapless-audio': value || 'weak' };
-        case 'replayGainClip':
-            return { 'replaygain-clip': value || 'no' };
-        case 'replayGainFallbackDB':
-            return { 'replaygain-fallback': value };
-        case 'replayGainMode':
-            return { replaygain: value || 'no' };
-        case 'replayGainPreampDB':
-            return { 'replaygain-preamp': value || 0 };
-        default:
-            return { 'audio-format': value };
-    }
-};
-
-export const getMpvProperties = (settings: SettingsState['playback']['mpvProperties']) => {
-    const properties: Record<string, any> = {
-        'audio-exclusive': settings.audioExclusiveMode || 'no',
-        'audio-samplerate':
-            settings.audioSampleRateHz === 0 ? undefined : settings.audioSampleRateHz,
-        'gapless-audio': settings.gaplessAudio || 'weak',
-        replaygain: settings.replayGainMode || 'no',
-        'replaygain-clip': settings.replayGainClip || 'no',
-        'replaygain-fallback': settings.replayGainFallbackDB,
-        'replaygain-preamp': settings.replayGainPreampDB || 0,
-    };
-
-    Object.keys(properties).forEach((key) =>
-        properties[key] === undefined ? delete properties[key] : {},
-    );
-
-    return properties;
-};
-
 export const MpvSettings = memo(() => {
     const { t } = useTranslation();
     const settings = usePlaybackSettings();

src/renderer/features/settings/components/settings-content.tsx

@@ -1,15 +1,41 @@
 import isElectron from 'is-electron';
+import { lazy, Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { AdvancedTab } from '/@/renderer/features/settings/components/advanced/advanced-tab';
-import { GeneralTab } from '/@/renderer/features/settings/components/general/general-tab';
-import { HotkeysTab } from '/@/renderer/features/settings/components/hotkeys/hotkeys-tab';
-import { PlaybackTab } from '/@/renderer/features/settings/components/playback/playback-tab';
-import { WindowTab } from '/@/renderer/features/settings/components/window/window-tab';
 import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { useSettingsStore, useSettingsStoreActions } from '/@/renderer/store/settings.store';
 import { Tabs } from '/@/shared/components/tabs/tabs';
 
+const GeneralTab = lazy(() =>
+    import('/@/renderer/features/settings/components/general/general-tab').then((module) => ({
+        default: module.GeneralTab,
+    })),
+);
+
+const PlaybackTab = lazy(() =>
+    import('/@/renderer/features/settings/components/playback/playback-tab').then((module) => ({
+        default: module.PlaybackTab,
+    })),
+);
+
+const HotkeysTab = lazy(() =>
+    import('/@/renderer/features/settings/components/hotkeys/hotkeys-tab').then((module) => ({
+        default: module.HotkeysTab,
+    })),
+);
+
+const WindowTab = lazy(() =>
+    import('/@/renderer/features/settings/components/window/window-tab').then((module) => ({
+        default: module.WindowTab,
+    })),
+);
+
+const AdvancedTab = lazy(() =>
+    import('/@/renderer/features/settings/components/advanced/advanced-tab').then((module) => ({
+        default: module.AdvancedTab,
+    })),
+);
+
 export const SettingsContent = () => {
     const { t } = useTranslation();
     const currentTab = useSettingsStore((state) => state.tab);
@@ -45,21 +71,31 @@ export const SettingsContent = () => {
                         </Tabs.Tab>
                     </Tabs.List>
                     <Tabs.Panel value="general">
-                        <GeneralTab />
+                        <Suspense fallback={null}>
+                            <GeneralTab />
+                        </Suspense>
                     </Tabs.Panel>
                     <Tabs.Panel value="playback">
-                        <PlaybackTab />
+                        <Suspense fallback={null}>
+                            <PlaybackTab />
+                        </Suspense>
                     </Tabs.Panel>
                     <Tabs.Panel value="hotkeys">
-                        <HotkeysTab />
+                        <Suspense fallback={null}>
+                            <HotkeysTab />
+                        </Suspense>
                     </Tabs.Panel>
                     {isElectron() && (
                         <Tabs.Panel value="window">
-                            <WindowTab />
+                            <Suspense fallback={null}>
+                                <WindowTab />
+                            </Suspense>
                         </Tabs.Panel>
                     )}
                     <Tabs.Panel value="advanced">
-                        <AdvancedTab />
+                        <Suspense fallback={null}>
+                            <AdvancedTab />
+                        </Suspense>
                     </Tabs.Panel>
                 </Tabs>
             </div>

src/renderer/features/settings/routes/settings-route.tsx

@@ -1,12 +1,17 @@
-import { useState } from 'react';
+import { lazy, Suspense, useState } from 'react';
 
 import { SettingsContent } from '/@/renderer/features/settings/components/settings-content';
-import { SettingsHeader } from '/@/renderer/features/settings/components/settings-header';
 import { SettingSearchContext } from '/@/renderer/features/settings/context/search-context';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
 import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { Flex } from '/@/shared/components/flex/flex';
 
+const SettingsHeader = lazy(() =>
+    import('/@/renderer/features/settings/components/settings-header').then((module) => ({
+        default: module.SettingsHeader,
+    })),
+);
+
 const SettingsRoute = () => {
     const [search, setSearch] = useState('');
 
@@ -15,7 +20,9 @@ const SettingsRoute = () => {
             <SettingSearchContext.Provider value={search}>
                 <LibraryContainer>
                     <Flex direction="column" h="100%" w="100%">
-                        <SettingsHeader setSearch={setSearch} />
+                        <Suspense fallback={<></>}>
+                            <SettingsHeader setSearch={setSearch} />
+                        </Suspense>
                         <SettingsContent />
                     </Flex>
                 </LibraryContainer>