ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Pull Requests Activity

perf: implement lazy loading for route components

Browse Source 
- Added React.lazy() for all page components to enable code splitting
- Wrapped Routes with Suspense component and loading fallback state
- Converted static imports to dynamic imports to reduce initial bundle size
- Added semicolons for consistent code style
This commit is contained in:
sasha-astiadi
2025-10-30 13:04:44 +01:00
parent 6d6cbd115a
commit c0cbe7e6bf
1 changed files with 26 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/App.tsx
View File

@@ -1,29 +1,33 @@
import { BrowserRouter, Routes, Route } from 'react-router-dom' import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Layout } from './components/Layout' import { Layout } from './components/Layout';
import HomePage from './pages/home/HomePage' import { lazy, Suspense } from 'react';
import CloudPage from './pages/cloud/CloudPage'
import NetworkPage from './pages/network/NetworkPage' const HomePage = lazy(() => import('./pages/home/HomePage'));
import AgentsPage from './pages/agents/AgentsPage' const CloudPage = lazy(() => import('./pages/cloud/CloudPage'));
import DownloadPage from './pages/download/DownloadPage' const NetworkPage = lazy(() => import('./pages/network/NetworkPage'));
import ComputePage from './pages/compute/ComputePage' const AgentsPage = lazy(() => import('./pages/agents/AgentsPage'));
import StoragePage from './pages/storage/StoragePage' const DownloadPage = lazy(() => import('./pages/download/DownloadPage'));
import GpuPage from './pages/gpu/GpuPage' const ComputePage = lazy(() => import('./pages/compute/ComputePage'));
const StoragePage = lazy(() => import('./pages/storage/StoragePage'));
const GpuPage = lazy(() => import('./pages/gpu/GpuPage'));
function App() { function App() {
return ( return (
<BrowserRouter> <BrowserRouter>
<Routes> <Suspense fallback={<div>Loading...</div>}>
<Route path="/" element={<Layout />}> <Routes>
<Route index element={<HomePage />} /> <Route path="/" element={<Layout />}>
<Route path="cloud" element={<CloudPage />} /> <Route index element={<HomePage />} />
<Route path="network" element={<NetworkPage />} /> <Route path="cloud" element={<CloudPage />} />
<Route path="agents" element={<AgentsPage />} /> <Route path="network" element={<NetworkPage />} />
<Route path="download" element={<DownloadPage />} /> <Route path="agents" element={<AgentsPage />} />
<Route path="compute" element={<ComputePage />} /> <Route path="download" element={<DownloadPage />} />
<Route path="storage" element={<StoragePage />} /> <Route path="compute" element={<ComputePage />} />
<Route path="gpu" element={<GpuPage />} /> <Route path="storage" element={<StoragePage />} />
</Route> <Route path="gpu" element={<GpuPage />} />
</Routes> </Route>
</Routes>
</Suspense>
</BrowserRouter> </BrowserRouter>
) )
} }