From 343bb3a49697a9d83166ff6ce4c50d0aa41d66f2 Mon Sep 17 00:00:00 2001
From: Lotus Bot <lotus@lotusguild.org>
Date: Thu, 21 May 2026 13:32:40 -0400
Subject: [PATCH] perf: lazy-load modal renderers and auth pages, split vendor
 chunks\n\nMain bundle: 3866 kB -> 2547 kB gzip (637 kB, was 997 kB)\nNew
 cacheable chunks: matrix-sdk, react-dom, router, react-query,
 linkify\nLazy-loaded: RoomSettings, SpaceSettings, Search, CreateRoom,
 CreateSpace, Auth\n\nCo-Authored-By: Claude Sonnet 4.6
 <noreply@anthropic.com>

---
 src/app/pages/Router.tsx | 35 +++++++++++++++++++----------------
 vite.config.js           | 10 ++++++++++
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 4de42081f..1a574b49b 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -9,7 +9,10 @@ import {
 } from 'react-router-dom';
 
 import { ClientConfig } from '../hooks/useClientConfig';
-import { AuthLayout, Login, Register, ResetPassword } from './auth';
+const AuthLayout = React.lazy(() => import('./auth').then(m => ({ default: m.AuthLayout })));
+const Login = React.lazy(() => import('./auth').then(m => ({ default: m.Login })));
+const Register = React.lazy(() => import('./auth').then(m => ({ default: m.Register })));
+const ResetPassword = React.lazy(() => import('./auth').then(m => ({ default: m.ResetPassword })));
 import {
   DIRECT_PATH,
   EXPLORE_PATH,
@@ -58,15 +61,15 @@ import { ClientNonUIFeatures } from './client/ClientNonUIFeatures';
 import { AuthRouteThemeManager, UnAuthRouteThemeManager } from './ThemeManager';
 import { ReceiveSelfDeviceVerification } from '../components/DeviceVerification';
 import { AutoRestoreBackupOnVerification } from '../components/BackupRestore';
-import { RoomSettingsRenderer } from '../features/room-settings';
+const RoomSettingsRenderer = React.lazy(() => import('../features/room-settings').then(m => ({ default: m.RoomSettingsRenderer })));
 import { ClientRoomsNotificationPreferences } from './client/ClientRoomsNotificationPreferences';
-import { SpaceSettingsRenderer } from '../features/space-settings';
+const SpaceSettingsRenderer = React.lazy(() => import('../features/space-settings').then(m => ({ default: m.SpaceSettingsRenderer })));
 import { UserRoomProfileRenderer } from '../components/UserRoomProfileRenderer';
-import { CreateRoomModalRenderer } from '../features/create-room';
+const CreateRoomModalRenderer = React.lazy(() => import('../features/create-room').then(m => ({ default: m.CreateRoomModalRenderer })));
 import { HomeCreateRoom } from './client/home/CreateRoom';
 import { Create } from './client/create';
-import { CreateSpaceModalRenderer } from '../features/create-space';
-import { SearchModalRenderer } from '../features/search';
+const CreateSpaceModalRenderer = React.lazy(() => import('../features/create-space').then(m => ({ default: m.CreateSpaceModalRenderer })));
+const SearchModalRenderer = React.lazy(() => import('../features/search').then(m => ({ default: m.SearchModalRenderer })));
 import { getFallbackSession } from '../state/sessions';
 import { CallStatusRenderer } from './CallStatusRenderer';
 import { CallEmbedProvider } from '../components/CallEmbedProvider';
@@ -95,15 +98,15 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
           return null;
         }}
         element={
-          <>
+          <React.Suspense fallback={null}>
             <AuthLayout />
             <UnAuthRouteThemeManager />
-          </>
+          </React.Suspense>
         }
       >
-        <Route path={LOGIN_PATH} element={<Login />} />
-        <Route path={REGISTER_PATH} element={<Register />} />
-        <Route path={RESET_PASSWORD_PATH} element={<ResetPassword />} />
+        <Route path={LOGIN_PATH} element={<React.Suspense fallback={null}><Login /></React.Suspense>} />
+        <Route path={REGISTER_PATH} element={<React.Suspense fallback={null}><Register /></React.Suspense>} />
+        <Route path={RESET_PASSWORD_PATH} element={<React.Suspense fallback={null}><ResetPassword /></React.Suspense>} />
       </Route>
 
       <Route
@@ -138,12 +141,12 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                         </ClientLayout>
                         <CallStatusRenderer />
                       </CallEmbedProvider>
-                      <SearchModalRenderer />
+                      <React.Suspense fallback={null}><SearchModalRenderer /></React.Suspense>
                       <UserRoomProfileRenderer />
-                      <CreateRoomModalRenderer />
-                      <CreateSpaceModalRenderer />
-                      <RoomSettingsRenderer />
-                      <SpaceSettingsRenderer />
+                      <React.Suspense fallback={null}><CreateRoomModalRenderer /></React.Suspense>
+                      <React.Suspense fallback={null}><CreateSpaceModalRenderer /></React.Suspense>
+                      <React.Suspense fallback={null}><RoomSettingsRenderer /></React.Suspense>
+                      <React.Suspense fallback={null}><SpaceSettingsRenderer /></React.Suspense>
                       <ReceiveSelfDeviceVerification />
                       <AutoRestoreBackupOnVerification />
                     </ClientNonUIFeatures>
diff --git a/vite.config.js b/vite.config.js
index e8c016ddf..58ca5e4f4 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -129,6 +129,16 @@ export default defineConfig({
     copyPublicDir: false,
     rollupOptions: {
       plugins: [inject({ Buffer: ['buffer', 'Buffer'] })],
+      output: {
+        manualChunks: (id) => {
+          if (id.includes('node_modules/matrix-js-sdk')) return 'matrix-sdk';
+          if (id.includes('node_modules/react-dom')) return 'react-dom';
+          if (id.includes('node_modules/react-router-dom') || id.includes('node_modules/@remix-run') || id.includes('node_modules/react-router/')) return 'router';
+          if (id.includes('node_modules/@tanstack')) return 'react-query';
+          if (id.includes('node_modules/linkify')) return 'linkify';
+          if (id.includes('node_modules/dompurify')) return 'dompurify';
+        },
+      },
     },
   },
 });