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>

This commit is contained in:
Lotus Bot
2026-05-21 13:32:40 -04:00
parent c05b233b3f
commit 343bb3a496
2 changed files with 29 additions and 16 deletions
+19 -16
View File
@@ -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>
+10
View File
@@ -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';
},
},
},
},
});