add more dynamic imports to optimize bundle

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>