0fe47a3790
- Splits About and Contact pages into separate chunks using React.lazy and Suspense. - Keeps Home page eager loaded to prevent layout shifts. - Adds PageLoader component as a fallback for Suspense. - Reduces initial bundle size by loading secondary pages only when needed.
34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { Suspense, lazy } from 'react';
|
|
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
|
import { LanguageProvider } from './i18n';
|
|
import { Navbar, Footer, FancyCursor, ScrollToTop } from './components/layout';
|
|
import { Home } from './pages/Home';
|
|
import { PageLoader } from './components/ui';
|
|
import './styles/global.css';
|
|
|
|
// Lazy load pages to reduce initial bundle size.
|
|
// Home is imported directly to prevent layout shift on initial load.
|
|
const About = lazy(() => import('./pages/About').then(module => ({ default: module.About })));
|
|
const Contact = lazy(() => import('./pages/Contact').then(module => ({ default: module.Contact })));
|
|
|
|
export function App() {
|
|
return (
|
|
<LanguageProvider>
|
|
<BrowserRouter>
|
|
<ScrollToTop />
|
|
<FancyCursor />
|
|
<Navbar />
|
|
{/* Suspense handles the loading state for lazy-loaded routes */}
|
|
<Suspense fallback={<PageLoader />}>
|
|
<Routes>
|
|
<Route path="/" element={<Home />} />
|
|
<Route path="/about" element={<About />} />
|
|
<Route path="/contact" element={<Contact />} />
|
|
</Routes>
|
|
</Suspense>
|
|
<Footer />
|
|
</BrowserRouter>
|
|
</LanguageProvider>
|
|
);
|
|
}
|