2344902a7f
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.
41 lines
1.7 KiB
TypeScript
41 lines
1.7 KiB
TypeScript
import React, { lazy, Suspense } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import ErrorBoundary from "./components/ErrorBoundary";
|
|
import { ConfirmProvider } from "./components/ConfirmProvider";
|
|
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 } },
|
|
});
|
|
|
|
const path = window.location.pathname;
|
|
const root =
|
|
path === "/privacy" ? <PrivacyPolicy /> :
|
|
path === "/terms" ? <Terms /> :
|
|
path.startsWith("/watch/") ? <WatchPage /> : (
|
|
<QueryClientProvider client={queryClient}>
|
|
<ErrorBoundary>
|
|
<ConfirmProvider>
|
|
<App />
|
|
</ConfirmProvider>
|
|
</ErrorBoundary>
|
|
</QueryClientProvider>
|
|
);
|
|
|
|
createRoot(document.getElementById("root")!).render(
|
|
<React.StrictMode>
|
|
<Suspense fallback={<div style={{ minHeight: "100vh" }} />}>{root}</Suspense>
|
|
</React.StrictMode>
|
|
);
|