Optimize frontend rendering, CSS, and backend history caching

src/App.tsx

@@ -1,20 +1,24 @@
+import { Suspense, lazy } from 'react';
 import { Route, Routes } from 'react-router-dom';
-import { HomePage } from './pages/HomePage';
-import { SettingsPage } from './pages/SettingsPage';
 import { ToastProvider } from './lib/toast';
 import { I18nProvider } from './lib/i18n';
 import { ThemeProvider } from './lib/theme';
 
+const HomePage = lazy(() => import('./pages/HomePage').then(module => ({ default: module.HomePage })));
+const SettingsPage = lazy(() => import('./pages/SettingsPage').then(module => ({ default: module.SettingsPage })));
+
 export default function App() {
   return (
     <ThemeProvider>
       <I18nProvider>
         <ToastProvider>
-          <Routes>
-            <Route path="/" element={<HomePage />} />
-            <Route path="/settings" element={<SettingsPage />} />
-            <Route path="*" element={<HomePage />} />
-          </Routes>
+          <Suspense fallback={<div className="h-screen w-screen flex items-center justify-center bg-bg"><div className="w-8 h-8 rounded-full border-4 border-accent-primary border-t-transparent animate-spin" /></div>}>
+            <Routes>
+              <Route path="/" element={<HomePage />} />
+              <Route path="/settings" element={<SettingsPage />} />
+              <Route path="*" element={<HomePage />} />
+            </Routes>
+          </Suspense>
         </ToastProvider>
       </I18nProvider>
     </ThemeProvider>