perf: split chunks and lazy-load Room to shrink initial bundle
manualChunks: add sentry, folds, i18n, jotai, immer Router: lazy-load Room component (used in home/direct/space routes) Sentry: wire in real DSN with browserTracingIntegration, 5% trace rate, tracePropagationTargets scoped to matrix.lotusguild.org, sendDefaultPii=false Main bundle: 2481 kB -> 1857 kB gzip 623 kB -> 450 kB (-28% initial load) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+1
-3
@@ -1,4 +1,2 @@
|
|||||||
# Sentry DSN — get from sentry.io → Project Settings → Client Keys
|
VITE_SENTRY_DSN=https://264a5e95c5d31fe080a2e92fb008294d@o4511430568378368.ingest.us.sentry.io/4511430571982849
|
||||||
# VITE_SENTRY_DSN=https://xxx@oXXX.ingest.sentry.io/YYYY
|
|
||||||
VITE_SENTRY_DSN=
|
|
||||||
VITE_APP_VERSION=lotus
|
VITE_APP_VERSION=lotus
|
||||||
|
|||||||
@@ -49,7 +49,7 @@ import { RouteSpaceProvider, Space, SpaceRouteRoomProvider, SpaceSearch } from '
|
|||||||
|
|
||||||
|
|
||||||
import { setAfterLoginRedirectPath } from './afterLoginRedirectPath';
|
import { setAfterLoginRedirectPath } from './afterLoginRedirectPath';
|
||||||
import { Room } from '../features/room';
|
const Room = React.lazy(() => import('../features/room').then(m => ({ default: m.Room })));
|
||||||
|
|
||||||
import { WelcomePage } from './client/WelcomePage';
|
import { WelcomePage } from './client/WelcomePage';
|
||||||
import { SidebarNav } from './client/SidebarNav';
|
import { SidebarNav } from './client/SidebarNav';
|
||||||
@@ -186,7 +186,9 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
|
|||||||
path={_ROOM_PATH}
|
path={_ROOM_PATH}
|
||||||
element={
|
element={
|
||||||
<HomeRouteRoomProvider>
|
<HomeRouteRoomProvider>
|
||||||
<Room />
|
<React.Suspense fallback={null}>
|
||||||
|
<Room />
|
||||||
|
</React.Suspense>
|
||||||
</HomeRouteRoomProvider>
|
</HomeRouteRoomProvider>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
@@ -211,7 +213,9 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
|
|||||||
path={_ROOM_PATH}
|
path={_ROOM_PATH}
|
||||||
element={
|
element={
|
||||||
<DirectRouteRoomProvider>
|
<DirectRouteRoomProvider>
|
||||||
<Room />
|
<React.Suspense fallback={null}>
|
||||||
|
<Room />
|
||||||
|
</React.Suspense>
|
||||||
</DirectRouteRoomProvider>
|
</DirectRouteRoomProvider>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
@@ -251,7 +255,9 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
|
|||||||
path={_ROOM_PATH}
|
path={_ROOM_PATH}
|
||||||
element={
|
element={
|
||||||
<SpaceRouteRoomProvider>
|
<SpaceRouteRoomProvider>
|
||||||
<Room />
|
<React.Suspense fallback={null}>
|
||||||
|
<Room />
|
||||||
|
</React.Suspense>
|
||||||
</SpaceRouteRoomProvider>
|
</SpaceRouteRoomProvider>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|||||||
+14
-8
@@ -7,20 +7,26 @@ import '@fontsource/inter/variable.css';
|
|||||||
import 'folds/dist/style.css';
|
import 'folds/dist/style.css';
|
||||||
import { configClass, varsClass } from 'folds';
|
import { configClass, varsClass } from 'folds';
|
||||||
|
|
||||||
if (import.meta.env.VITE_SENTRY_DSN) {
|
const sentryDsn = import.meta.env.VITE_SENTRY_DSN;
|
||||||
|
if (sentryDsn) {
|
||||||
Sentry.init({
|
Sentry.init({
|
||||||
dsn: import.meta.env.VITE_SENTRY_DSN,
|
dsn: sentryDsn,
|
||||||
environment: import.meta.env.MODE,
|
environment: import.meta.env.MODE,
|
||||||
release: import.meta.env.VITE_APP_VERSION,
|
release: import.meta.env.VITE_APP_VERSION,
|
||||||
|
integrations: [
|
||||||
|
Sentry.browserTracingIntegration(),
|
||||||
|
],
|
||||||
|
// Only trace requests to our own Matrix homeserver
|
||||||
|
tracePropagationTargets: ['localhost', /^https:\/\/matrix\.lotusguild\.org/],
|
||||||
|
// 5% of transactions — enough signal without burning quota
|
||||||
tracesSampleRate: 0.05,
|
tracesSampleRate: 0.05,
|
||||||
// Don't send PII — strip user IPs and don't attach user info automatically
|
// Don't send PII (IPs, usernames) — this is a private chat app
|
||||||
sendDefaultPii: false,
|
sendDefaultPii: false,
|
||||||
|
// Forward Sentry logs to the dashboard
|
||||||
|
enableLogs: true,
|
||||||
beforeSend(event) {
|
beforeSend(event) {
|
||||||
// Scrub any accessToken that may have leaked into breadcrumbs/data
|
// Drop any event that may have leaked an access token into breadcrumbs/data
|
||||||
const str = JSON.stringify(event);
|
if (JSON.stringify(event).includes('access_token')) return null;
|
||||||
if (str.includes('access_token') || str.includes('accessToken')) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return event;
|
return event;
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -137,6 +137,11 @@ export default defineConfig({
|
|||||||
if (id.includes('node_modules/@tanstack')) return 'react-query';
|
if (id.includes('node_modules/@tanstack')) return 'react-query';
|
||||||
if (id.includes('node_modules/linkify')) return 'linkify';
|
if (id.includes('node_modules/linkify')) return 'linkify';
|
||||||
if (id.includes('node_modules/dompurify')) return 'dompurify';
|
if (id.includes('node_modules/dompurify')) return 'dompurify';
|
||||||
|
if (id.includes('node_modules/@sentry')) return 'sentry';
|
||||||
|
if (id.includes('node_modules/i18next') || id.includes('node_modules/react-i18next')) return 'i18n';
|
||||||
|
if (id.includes('node_modules/jotai')) return 'jotai';
|
||||||
|
if (id.includes('node_modules/immer')) return 'immer';
|
||||||
|
if (id.includes('node_modules/folds')) return 'folds';
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user