From 0fe47a37901b2e19edf4c3d8d082b3cda3d83746 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Mon, 26 Jan 2026 01:41:35 +0000 Subject: [PATCH] feat(perf): implement route lazy loading for About and Contact pages - 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. --- .jules/bolt.md | 4 ++++ src/App.tsx | 22 ++++++++++++++++------ src/components/ui/PageLoader.module.css | 22 ++++++++++++++++++++++ src/components/ui/PageLoader.tsx | 9 +++++++++ src/components/ui/index.ts | 1 + 5 files changed, 52 insertions(+), 6 deletions(-) create mode 100644 src/components/ui/PageLoader.module.css create mode 100644 src/components/ui/PageLoader.tsx diff --git a/.jules/bolt.md b/.jules/bolt.md index a7efe75..f667f2d 100644 --- a/.jules/bolt.md +++ b/.jules/bolt.md @@ -1,3 +1,7 @@ ## 2024-05-22 - Missing Scripts and Environment **Learning:** The project lacks `lint` script in `package.json`. Running `pnpm lint` might invoke system tools (like Android Lint?) instead of failing or doing nothing useful. Always check `package.json` scripts first. **Action:** Use specific commands like `pnpm exec tsc --noEmit` or `npx vitest` as discovered/documented, rather than assuming standard scripts exist. + +## 2025-01-26 - Missing Node Modules +**Learning:** The environment might lack `node_modules` completely, preventing `npx vitest` or `pnpm exec tsc` from running even if dependencies are listed in `package.json`. Network restrictions may prevent `pnpm install`. +**Action:** When `node_modules` is missing and cannot be installed, rely on static analysis, careful code review, and verifying file contents manually. Do not assume tests can run. diff --git a/src/App.tsx b/src/App.tsx index 77f78cf..5c4e796 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,9 +1,16 @@ +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, About, Contact } from './pages'; +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 ( @@ -11,11 +18,14 @@ export function App() { - - } /> - } /> - } /> - + {/* Suspense handles the loading state for lazy-loaded routes */} + }> + + } /> + } /> + } /> + +