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:
+19
-16
@@ -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>
|
||||
|
||||
@@ -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';
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user