peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

perf: route- and modal-level code splitting (React.lazy)

Browse source 
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.
This commit is contained in:
npeter83 2026-07-04 19:43:50 +02:00
parent 18a33b96c8
commit 2344902a7f
10 changed files with 167 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/main.tsx
View file

@ -1,22 +1,25 @@
import React from "react";
import React, { lazy, Suspense } from "react";
import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import App from "./App";
import ErrorBoundary from "./components/ErrorBoundary";
import { ConfirmProvider } from "./components/ConfirmProvider";
import PrivacyPolicy from "./components/legal/PrivacyPolicy";
import Terms from "./components/legal/Terms";
import WatchPage from "./components/WatchPage";
import "./i18n";
import "./index.css";
// Split by top-level route so each entry point is its own chunk: a public /watch share link or a
// legal page never downloads the authenticated app bundle, and the app never carries them either.
// The legal pages live outside the App tree (no /api/me) so Google's consent screen and reviewers
// can fetch them directly; the watch page is a login-free public player. Reached by full-page
// navigation (plain <a href>), so a simple pathname switch is enough — no router needed.
const App = lazy(() => import("./App"));
const PrivacyPolicy = lazy(() => import("./components/legal/PrivacyPolicy"));
const Terms = lazy(() => import("./components/legal/Terms"));
const WatchPage = lazy(() => import("./components/WatchPage"));
const queryClient = new QueryClient({
defaultOptions: { queries: { retry: false, staleTime: 30_000, refetchOnWindowFocus: false } },
});
// Public, login-free legal pages. They live outside the authenticated App tree (no /api/me)
// so Google's consent screen and reviewers can fetch them directly. Reached by full-page
// navigation (plain <a href>), so a simple pathname switch is enough — no router needed.
const path = window.location.pathname;
const root =
path === "/privacy" ? <PrivacyPolicy /> :
@ -32,5 +35,7 @@ const root =
);
createRoot(document.getElementById("root")!).render(
<React.StrictMode>{root}</React.StrictMode>
<React.StrictMode>
<Suspense fallback={<div style={{ minHeight: "100vh" }} />}>{root}</Suspense>
</React.StrictMode>
);