hypercross/tts-workshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(web): code-split the three.js stack out of the main bundle

Browse Source
This commit is contained in:
hypercross
2026-08-10 09:12:38 +08:00
parent 45bf362fbc
commit 6502fdae4f
10 changed files with 600 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/App.tsx
+31 -18
View File
@@ -1,15 +1,21 @@
import { lazy, Suspense } from 'react';
import { Link, Route, Routes } from 'react-router-dom';
import SearchPage from './pages/SearchPage';
import ModPage from './pages/ModPage';
import FullSetupPage from './pages/FullSetupPage';
import BgmPage from './pages/BgmPage';
import BgmPackagePage from './pages/BgmPackagePage';
import PartsPage from './pages/PartsPage';
import PartPage from './pages/PartPage';
import SurfacesPage from './pages/SurfacesPage';
import SurfacePage from './pages/SurfacePage';
import SetupsPage from './pages/SetupsPage';
import SetupPage from './pages/SetupPage';
// The full-setup view and the bgm/tabletop pages pull in the whole three.js
// stack (Scene + all mesh viewers + @tts/tabletop). Lazy-load them so that
// stack stays code-split out of the main bundle and is only fetched when one
// of those routes is actually visited.
const FullSetupPage = lazy(() => import('./pages/FullSetupPage'));
const BgmPage = lazy(() => import('./pages/BgmPage'));
const BgmPackagePage = lazy(() => import('./pages/BgmPackagePage'));
const PartsPage = lazy(() => import('./pages/PartsPage'));
const PartPage = lazy(() => import('./pages/PartPage'));
const SurfacesPage = lazy(() => import('./pages/SurfacesPage'));
const SurfacePage = lazy(() => import('./pages/SurfacePage'));
const SetupsPage = lazy(() => import('./pages/SetupsPage'));
const SetupPage = lazy(() => import('./pages/SetupPage'));
export default function App() {
return (
@@ -33,15 +39,22 @@ export default function App() {
<Routes>
<Route path="/" element={<SearchPage />} />
<Route path="/mod/:id" element={<ModPage />} />
<Route path="/mod/:id/setup" element={<FullSetupPage />} />
<Route path="/bgm" element={<BgmPage />} />
<Route path="/bgm/:id" element={<BgmPackagePage />} />
<Route path="/bgm/:id/parts" element={<PartsPage />} />
<Route path="/bgm/:id/parts/:type/:part" element={<PartPage />} />
<Route path="/bgm/:id/surfaces" element={<SurfacesPage />} />
<Route path="/bgm/:id/surfaces/:type/:surface" element={<SurfacePage />} />
<Route path="/bgm/:id/setups" element={<SetupsPage />} />
<Route path="/bgm/:id/setups/:type/:setup" element={<SetupPage />} />
<Route
path="/mod/:id/setup"
element={
<Suspense fallback={<p className="text-sm text-zinc-400">Loading full setup…</p>}>
<FullSetupPage />
</Suspense>
}
/>
<Route path="/bgm" element={<Suspense fallback={null}><BgmPage /></Suspense>} />
<Route path="/bgm/:id" element={<Suspense fallback={null}><BgmPackagePage /></Suspense>} />
<Route path="/bgm/:id/parts" element={<Suspense fallback={null}><PartsPage /></Suspense>} />
<Route path="/bgm/:id/parts/:type/:part" element={<Suspense fallback={null}><PartPage /></Suspense>} />
<Route path="/bgm/:id/surfaces" element={<Suspense fallback={null}><SurfacesPage /></Suspense>} />
<Route path="/bgm/:id/surfaces/:type/:surface" element={<Suspense fallback={null}><SurfacePage /></Suspense>} />
<Route path="/bgm/:id/setups" element={<Suspense fallback={null}><SetupsPage /></Suspense>} />
<Route path="/bgm/:id/setups/:type/:setup" element={<Suspense fallback={null}><SetupPage /></Suspense>} />
</Routes>
</main>
</div>