add more dynamic imports to optimize bundle

src/renderer/router/app-router.tsx

@@ -1,15 +1,7 @@
 import { lazy, Suspense } from 'react';
 import { HashRouter, Route, Routes } from 'react-router';
 
-import { LyricsSettingsContextModal } from '/@/renderer/features/lyrics/components/lyrics-settings-modal';
-import { ShuffleAllContextModal } from '/@/renderer/features/player/components/shuffle-all-modal';
-import { AddToPlaylistContextModal } from '/@/renderer/features/playlists/components/add-to-playlist-context-modal';
-import { SaveAndReplaceContextModal } from '/@/renderer/features/playlists/components/save-and-replace-context-modal';
-import { UpdatePlaylistContextModal } from '/@/renderer/features/playlists/components/update-playlist-form';
-import { SettingsContextModal } from '/@/renderer/features/settings/components/settings-modal';
 import { RouterErrorBoundary } from '/@/renderer/features/shared/components/router-error-boundary';
-import { ShareItemContextModal } from '/@/renderer/features/sharing/components/share-item-context-modal';
-import { VisualizerSettingsContextModal } from '/@/renderer/features/visualizer/components/audiomotionanalyzer/visualizer-settings-modal';
 import { AuthenticationOutlet } from '/@/renderer/layouts/authentication-outlet';
 import { ResponsiveLayout } from '/@/renderer/layouts/responsive-layout';
 import { AppOutlet } from '/@/renderer/router/app-outlet';
@@ -87,6 +79,108 @@ const FavoritesRoute = lazy(() => import('/@/renderer/features/favorites/routes/
 
 const SettingsRoute = lazy(() => import('/@/renderer/features/settings/routes/settings-route'));
 
+const LazyLyricsSettingsContextModal = lazy(() =>
+    import('/@/renderer/features/lyrics/components/lyrics-settings-modal').then((module) => ({
+        default: module.LyricsSettingsContextModal,
+    })),
+);
+
+const LyricsSettingsContextModal = (props: any) => (
+    <Suspense fallback={<></>}>
+        <LazyLyricsSettingsContextModal {...props} />
+    </Suspense>
+);
+
+const LazyShuffleAllContextModal = lazy(() =>
+    import('/@/renderer/features/player/components/shuffle-all-modal').then((module) => ({
+        default: module.ShuffleAllContextModal,
+    })),
+);
+
+const ShuffleAllContextModal = (props: any) => (
+    <Suspense fallback={<></>}>
+        <LazyShuffleAllContextModal {...props} />
+    </Suspense>
+);
+
+const LazyAddToPlaylistContextModal = lazy(() =>
+    import('/@/renderer/features/playlists/components/add-to-playlist-context-modal').then(
+        (module) => ({
+            default: module.AddToPlaylistContextModal,
+        }),
+    ),
+);
+
+const AddToPlaylistContextModal = (props: any) => (
+    <Suspense fallback={<></>}>
+        <LazyAddToPlaylistContextModal {...props} />
+    </Suspense>
+);
+
+const LazySaveAndReplaceContextModal = lazy(() =>
+    import('/@/renderer/features/playlists/components/save-and-replace-context-modal').then(
+        (module) => ({
+            default: module.SaveAndReplaceContextModal,
+        }),
+    ),
+);
+
+const SaveAndReplaceContextModal = (props: any) => (
+    <Suspense fallback={<></>}>
+        <LazySaveAndReplaceContextModal {...props} />
+    </Suspense>
+);
+
+const LazyUpdatePlaylistContextModal = lazy(() =>
+    import('/@/renderer/features/playlists/components/update-playlist-form').then((module) => ({
+        default: module.UpdatePlaylistContextModal,
+    })),
+);
+
+const UpdatePlaylistContextModal = (props: any) => (
+    <Suspense fallback={<></>}>
+        <LazyUpdatePlaylistContextModal {...props} />
+    </Suspense>
+);
+
+const LazySettingsContextModal = lazy(() =>
+    import('/@/renderer/features/settings/components/settings-modal').then((module) => ({
+        default: module.SettingsContextModal,
+    })),
+);
+
+const SettingsContextModal = (props: any) => (
+    <Suspense fallback={<></>}>
+        <LazySettingsContextModal {...props} />
+    </Suspense>
+);
+
+const LazyShareItemContextModal = lazy(() =>
+    import('/@/renderer/features/sharing/components/share-item-context-modal').then((module) => ({
+        default: module.ShareItemContextModal,
+    })),
+);
+
+const ShareItemContextModal = (props: any) => (
+    <Suspense fallback={<></>}>
+        <LazyShareItemContextModal {...props} />
+    </Suspense>
+);
+
+const LazyVisualizerSettingsContextModal = lazy(() =>
+    import(
+        '/@/renderer/features/visualizer/components/audiomotionanalyzer/visualizer-settings-modal'
+    ).then((module) => ({
+        default: module.VisualizerSettingsContextModal,
+    })),
+);
+
+const VisualizerSettingsContextModal = (props: any) => (
+    <Suspense fallback={<></>}>
+        <LazyVisualizerSettingsContextModal {...props} />
+    </Suspense>
+);
+
 export const AppRouter = () => {
     const router = (
         <HashRouter>