v3: performance pass, bundle size pass, i18n pass, docker pass

src/App.tsx

@@ -1,20 +1,8 @@
+import { lazy, Suspense } from "react";
 import { BrowserRouter, Route, Routes } from "react-router";
 
-import { Index } from "./pages/Index.tsx";
 import { RestrictedGuest } from "./pages/RestrictedGuest.tsx";
 import { RestrictedLoggedIn } from "./pages/RestrictedLoggedIn.tsx";
-import { Dump } from "./pages/Dump.tsx";
-import { DumpEdit } from "./pages/DumpEdit.tsx";
-import { UserLogin } from "./pages/UserLogin.tsx";
-import { UserPublicProfile } from "./pages/UserPublicProfile.tsx";
-import { UserRegister } from "./pages/UserRegister.tsx";
-import { UserDumps } from "./pages/UserDumps.tsx";
-import { UserUpvoted } from "./pages/UserUpvoted.tsx";
-import { UserPlaylists } from "./pages/UserPlaylists.tsx";
-import { PlaylistDetail } from "./pages/PlaylistDetail.tsx";
-import { Notifications } from "./pages/Notifications.tsx";
-import { Search } from "./pages/Search.tsx";
-import { ResetPassword } from "./pages/ResetPassword.tsx";
 
 import { AuthProvider } from "./contexts/AuthProvider.tsx";
 import { PlayerProvider } from "./contexts/PlayerProvider.tsx";
@@ -25,54 +13,106 @@ import { GlobalPlayer } from "./components/GlobalPlayer.tsx";
 
 import "./App.css";
 
+const Index = lazy(() =>
+  import("./pages/Index.tsx").then((m) => ({ default: m.Index }))
+);
+const Dump = lazy(() =>
+  import("./pages/Dump.tsx").then((m) => ({ default: m.Dump }))
+);
+const DumpEdit = lazy(() =>
+  import("./pages/DumpEdit.tsx").then((m) => ({ default: m.DumpEdit }))
+);
+const UserLogin = lazy(() =>
+  import("./pages/UserLogin.tsx").then((m) => ({ default: m.UserLogin }))
+);
+const UserPublicProfile = lazy(() =>
+  import("./pages/UserPublicProfile.tsx").then((m) => ({
+    default: m.UserPublicProfile,
+  }))
+);
+const UserRegister = lazy(() =>
+  import("./pages/UserRegister.tsx").then((m) => ({ default: m.UserRegister }))
+);
+const UserDumps = lazy(() =>
+  import("./pages/UserDumps.tsx").then((m) => ({ default: m.UserDumps }))
+);
+const UserUpvoted = lazy(() =>
+  import("./pages/UserUpvoted.tsx").then((m) => ({ default: m.UserUpvoted }))
+);
+const UserPlaylists = lazy(() =>
+  import("./pages/UserPlaylists.tsx").then((m) => ({
+    default: m.UserPlaylists,
+  }))
+);
+const PlaylistDetail = lazy(() =>
+  import("./pages/PlaylistDetail.tsx").then((m) => ({
+    default: m.PlaylistDetail,
+  }))
+);
+const Notifications = lazy(() =>
+  import("./pages/Notifications.tsx").then((m) => ({
+    default: m.Notifications,
+  }))
+);
+const Search = lazy(() =>
+  import("./pages/Search.tsx").then((m) => ({ default: m.Search }))
+);
+const ResetPassword = lazy(() =>
+  import("./pages/ResetPassword.tsx").then((m) => ({
+    default: m.ResetPassword,
+  }))
+);
+
 function AppRoutes() {
   return (
-    <Routes>
-      <Route path="/" element={<Index />} />
-      <Route path="/dumps/:selectedDump" element={<Dump />} />
-      <Route
-        path="/dumps/:selectedDump/edit"
-        element={
-          <RestrictedLoggedIn>
-            <DumpEdit />
-          </RestrictedLoggedIn>
-        }
-      />
-      <Route
-        path="/register"
-        element={
-          <RestrictedGuest>
-            <UserRegister />
-          </RestrictedGuest>
-        }
-      />
-      <Route
-        path="/login"
-        element={
-          <RestrictedGuest>
-            <UserLogin />
-          </RestrictedGuest>
-        }
-      />
-      <Route path="/users/:username" element={<UserPublicProfile />} />
-      <Route path="/users/:username/dumps" element={<UserDumps />} />
-      <Route path="/users/:username/upvoted" element={<UserUpvoted />} />
-      <Route
-        path="/users/:username/playlists"
-        element={<UserPlaylists />}
-      />
-      <Route path="/playlists/:playlistId" element={<PlaylistDetail />} />
-      <Route path="/search" element={<Search />} />
-      <Route path="/reset-password" element={<ResetPassword />} />
-      <Route
-        path="/notifications"
-        element={
-          <RestrictedLoggedIn>
-            <Notifications />
-          </RestrictedLoggedIn>
-        }
-      />
-    </Routes>
+    <Suspense>
+      <Routes>
+        <Route path="/" element={<Index />} />
+        <Route path="/dumps/:selectedDump" element={<Dump />} />
+        <Route
+          path="/dumps/:selectedDump/edit"
+          element={
+            <RestrictedLoggedIn>
+              <DumpEdit />
+            </RestrictedLoggedIn>
+          }
+        />
+        <Route
+          path="/register"
+          element={
+            <RestrictedGuest>
+              <UserRegister />
+            </RestrictedGuest>
+          }
+        />
+        <Route
+          path="/login"
+          element={
+            <RestrictedGuest>
+              <UserLogin />
+            </RestrictedGuest>
+          }
+        />
+        <Route path="/users/:username" element={<UserPublicProfile />} />
+        <Route path="/users/:username/dumps" element={<UserDumps />} />
+        <Route path="/users/:username/upvoted" element={<UserUpvoted />} />
+        <Route
+          path="/users/:username/playlists"
+          element={<UserPlaylists />}
+        />
+        <Route path="/playlists/:playlistId" element={<PlaylistDetail />} />
+        <Route path="/search" element={<Search />} />
+        <Route path="/reset-password" element={<ResetPassword />} />
+        <Route
+          path="/notifications"
+          element={
+            <RestrictedLoggedIn>
+              <Notifications />
+            </RestrictedLoggedIn>
+          }
+        />
+      </Routes>
+    </Suspense>
   );
 }