perf: route- and modal-level code splitting (React.lazy)
The whole app shipped in one bundle, so the logged-out landing and every page
pulled all module code. Split into lazy chunks:
- main.tsx: lazy App + the public leaves (WatchPage, Privacy, Terms), so a
public /watch share link never downloads the authenticated app.
- App.tsx: each module page (Feed, Channels, Playlists, Stats, Scheduler,
Config, Users, Settings, Notifications, Messages, Downloads, ChannelPage) and
the About/ReleaseNotes/Onboarding modals load on demand behind <Suspense>.
- Heavy modals lazy in their parents: PlayerModal (Feed, Playlists),
DownloadDialog (DownloadButton — kept out of the feed chunk), and the
VideoEditor/ShareDialog/ProfileEditor (DownloadCenter).
- Extracted focusAccessRequestsTab + the tab constants to lib/adminUsersTab so
callers can pre-select the admin tab without statically importing the now
lazy-loaded AdminUsers page (which would defeat the split).
Build now emits ~25 chunks. Landing no longer downloads any module code
(~350 KB deferred); dev landing Perf 93->95. Verified in a real browser: every
page + the video editor load with no console errors.
2026-07-04 19:43:50 +02:00
|
|
|
import { LS, setAccountRaw } from "./storage";
|
|
|
|
|
|
|
|
|
|
// The admin Users page's persisted-tab key + the Access-requests tab id, plus a helper to
|
|
|
|
|
// pre-select that tab before navigating there (a notification's "Review" link uses it —
|
|
|
|
|
// usePersistedTab reads the key on mount, and the page mounts fresh on navigation).
|
|
|
|
|
//
|
|
|
|
|
// Kept out of AdminUsers.tsx so callers (App, NotificationsPanel) can pre-select the tab
|
|
|
|
|
// WITHOUT statically importing the — now lazy-loaded — admin page, which would otherwise pull
|
|
|
|
|
// it back into the main bundle and defeat the code-split.
|
|
|
|
|
export const ADMIN_USERS_TAB_KEY = LS.adminUsersTab;
|
2026-07-11 04:47:08 +02:00
|
|
|
const ADMIN_USERS_ACCESS_TAB = "access";
|
perf: route- and modal-level code splitting (React.lazy)
The whole app shipped in one bundle, so the logged-out landing and every page
pulled all module code. Split into lazy chunks:
- main.tsx: lazy App + the public leaves (WatchPage, Privacy, Terms), so a
public /watch share link never downloads the authenticated app.
- App.tsx: each module page (Feed, Channels, Playlists, Stats, Scheduler,
Config, Users, Settings, Notifications, Messages, Downloads, ChannelPage) and
the About/ReleaseNotes/Onboarding modals load on demand behind <Suspense>.
- Heavy modals lazy in their parents: PlayerModal (Feed, Playlists),
DownloadDialog (DownloadButton — kept out of the feed chunk), and the
VideoEditor/ShareDialog/ProfileEditor (DownloadCenter).
- Extracted focusAccessRequestsTab + the tab constants to lib/adminUsersTab so
callers can pre-select the admin tab without statically importing the now
lazy-loaded AdminUsers page (which would defeat the split).
Build now emits ~25 chunks. Landing no longer downloads any module code
(~350 KB deferred); dev landing Perf 93->95. Verified in a real browser: every
page + the video editor load with no console errors.
2026-07-04 19:43:50 +02:00
|
|
|
|
|
|
|
|
export function focusAccessRequestsTab(): void {
|
|
|
|
|
setAccountRaw(ADMIN_USERS_TAB_KEY, ADMIN_USERS_ACCESS_TAB);
|
|
|
|
|
}
|