frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🛠 Build optimizations (chunking and lazy-loading)

Browse Source
This commit is contained in:
Rishi Ghan
2026-03-06 12:37:45 -05:00
parent 46e683859e
commit 7818c6f290
4 changed files with 58 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/client/components/ComicDetail/TabControls.tsx
View File

@@ -1,4 +1,4 @@
import React, { ReactElement, useState } from "react";
import React, { ReactElement, Suspense, useState } from "react";
import { isNil } from "lodash";
export const TabControls = (props): ReactElement => {
@@ -47,9 +47,11 @@ export const TabControls = (props): ReactElement => {
</nav>
</div>
</div>
{filteredTabs.map(({ id, content }) => {
return currentActive === id ? content : null;
})}
<Suspense>
{filteredTabs.map(({ id, content }) => {
return currentActive === id ? content : null;
})}
</Suspense>
</>
);
};

15
src/client/components/ComicDetail/tabConfig.tsx
View File

@@ -1,11 +1,12 @@
import React from "react";
import React, { lazy } from "react";
import { isNil, isEmpty } from "lodash";
import { VolumeInformation } from "./Tabs/VolumeInformation";
import { ComicInfoXML } from "./Tabs/ComicInfoXML";
import { ArchiveOperations } from "./Tabs/ArchiveOperations";
import AcquisitionPanel from "./AcquisitionPanel";
import TorrentSearchPanel from "./TorrentSearchPanel";
import DownloadsPanel from "./DownloadsPanel";
const VolumeInformation = lazy(() => import("./Tabs/VolumeInformation").then(m => ({ default: m.VolumeInformation })));
const ComicInfoXML = lazy(() => import("./Tabs/ComicInfoXML").then(m => ({ default: m.ComicInfoXML })));
const ArchiveOperations = lazy(() => import("./Tabs/ArchiveOperations").then(m => ({ default: m.ArchiveOperations })));
const AcquisitionPanel = lazy(() => import("./AcquisitionPanel"));
const TorrentSearchPanel = lazy(() => import("./TorrentSearchPanel"));
const DownloadsPanel = lazy(() => import("./DownloadsPanel"));
interface TabConfig {
id: number;

31
src/client/index.tsx
View File

@@ -1,22 +1,21 @@
import React from "react";
import { render } from "react-dom";
import { lazy, Suspense } from "react";
import { createRoot } from "react-dom/client";
const root = createRoot(document.getElementById("root")!);
import App from "./components/App";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Settings from "./components/Settings/Settings";
import { ErrorPage } from "./components/shared/ErrorPage";
const rootEl = document.getElementById("root");
const root = createRoot(rootEl);
import i18n from "./shared/utils/i18n.util";
import "./shared/utils/i18n.util";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import Import from "./components/Import/Import";
import Dashboard from "./components/Dashboard/Dashboard";
import Search from "./components/Search/Search";
import TabulatedContentContainer from "./components/Library/TabulatedContentContainer";
import { ComicDetailContainer } from "./components/ComicDetail/ComicDetailContainer";
import Volumes from "./components/Volumes/Volumes";
import VolumeDetails from "./components/VolumeDetail/VolumeDetail";
import WantedComics from "./components/WantedComics/WantedComics";
const Settings = lazy(() => import("./components/Settings/Settings"));
const Import = lazy(() => import("./components/Import/Import"));
const Dashboard = lazy(() => import("./components/Dashboard/Dashboard"));
const Search = lazy(() => import("./components/Search/Search"));
const TabulatedContentContainer = lazy(() => import("./components/Library/TabulatedContentContainer"));
const ComicDetailContainer = lazy(() => import("./components/ComicDetail/ComicDetailContainer").then(m => ({ default: m.ComicDetailContainer })));
const Volumes = lazy(() => import("./components/Volumes/Volumes"));
const VolumeDetails = lazy(() => import("./components/VolumeDetail/VolumeDetail"));
const WantedComics = lazy(() => import("./components/WantedComics/WantedComics"));
const queryClient = new QueryClient({
defaultOptions: {
@@ -55,6 +54,8 @@ const router = createBrowserRouter([
root.render(
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
<Suspense>
<RouterProvider router={router} />
</Suspense>
</QueryClientProvider>,
);