Skip to content

⚡ Bolt: Implement route-based code splitting to reduce initial bundle size by ~76% #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Pmaster-dev wants to merge 1 commit into
base: main
Choose a base branch
from
Open

⚡ Bolt: Implement route-based code splitting to reduce initial bundle size by ~76% #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .jules/bolt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# Bolt's Performance Journal

## 2025-05-18 - Route-based Code Splitting in Single-Page Application

**Learning:** Static imports of all top-level page components in `client/src/App.tsx` caused Vite to bundle all pages into a single monolithic entry chunk (`1,695 kB` uncompressed / `441 kB` gzipped). This resulted in downloading code for the entire application upfront, including heavy dashboard modules (`Dashboard` is ~950 kB). By converting route page components to dynamic imports (`React.lazy()` with `Suspense`), Vite automatically splits pages into separate lazy-loaded chunks.

**Action:** Always use `React.lazy()` for route-level components in React applications using Vite/Wouter/React-Router to keep initial bundle sizes minimal (<500 kB) and load page JS on-demand as users navigate.
212 changes: 111 additions & 101 deletions client/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,28 @@ import { useState, useEffect, useRef } from "react";
import { queryClient } from "./lib/queryClient";
import { QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "@/components/ui/toaster";
import NotFound from "@/pages/not-found";
import Dashboard from "@/pages/Dashboard";
import MainframeDashboard from "@/pages/MainframeDashboard";
import WebhookManagement from "@/pages/WebhookManagement";
import AccessibilityPage from "@/pages/AccessibilityPage";
import PricingPage from "@/pages/PricingPage";
import IndividualIdPage from "@/pages/IndividualIdPage";
import DisasterRecoveryPage from "@/pages/DisasterRecoveryPage";
import { lazy, Suspense } from "react";
import SupportBubble from "@/components/SupportBubble";
import SmoothScrollLink from "@/components/SmoothScrollLink";
import ScrollToTop from "@/components/ScrollToTop";
import PinkSyncWidget from "@/components/PinkSyncWidget";
import { GestureEasterEgg } from "@/components/GestureEasterEgg";
import { EasterEggHints } from "@/components/EasterEggHints";
import SitemapPage from "@/pages/SitemapPage";
import { Menu, X, ChevronRight, ChevronDown, Github } from "lucide-react";
import "@/styles/ScrollStyles.css";

// Performance Optimization: Lazy load route components for code splitting
// Reduces initial JavaScript bundle size significantly on page load
const NotFound = lazy(() => import("@/pages/not-found"));
const Dashboard = lazy(() => import("@/pages/Dashboard"));
const MainframeDashboard = lazy(() => import("@/pages/MainframeDashboard"));
const WebhookManagement = lazy(() => import("@/pages/WebhookManagement"));
const AccessibilityPage = lazy(() => import("@/pages/AccessibilityPage"));
const PricingPage = lazy(() => import("@/pages/PricingPage"));
const IndividualIdPage = lazy(() => import("@/pages/IndividualIdPage"));
const DisasterRecoveryPage = lazy(() => import("@/pages/DisasterRecoveryPage"));
const SitemapPage = lazy(() => import("@/pages/SitemapPage"));

function MainNav() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [activeSection, setActiveSection] = useState<string | null>(null);
Expand Down Expand Up @@ -470,104 +474,110 @@ function Router({ initialUserId }: { initialUserId: number }) {
<div className="flex flex-col min-h-screen">
<MainNav />
<main className="flex-1">
<Switch>
<Route path="/">
<Dashboard userId={initialUserId} />
</Route>
<Route path="/mainframe">
<MainframeDashboard userId={initialUserId} />
</Route>
<Route path="/webhooks">
<WebhookManagement />
</Route>
<Route path="/accessibility">
<AccessibilityPage />
</Route>
<Route path="/pricing">
<PricingPage />
</Route>
<Route path="/individual-id">
<IndividualIdPage />
</Route>
<Route path="/demo">
<div className="container mx-auto py-8">
<h1 className="text-3xl font-bold mb-6">Interactive Demo</h1>
<p className="text-muted-foreground mb-8">
Experience the power of NegraRosa Security with our interactive demos
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="border rounded-lg p-6">
<h3 className="text-xl font-medium mb-2">User Experience Demo</h3>
<p className="text-muted-foreground mb-4">
See how verification works from the user's perspective
</p>
<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90">
Try Demo
</button>
</div>
<div className="border rounded-lg p-6">
<h3 className="text-xl font-medium mb-2">Business Integration Demo</h3>
<p className="text-muted-foreground mb-4">
Explore how businesses can integrate our verification system
</p>
<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90">
Try Demo
</button>
<Suspense fallback={
<div className="flex items-center justify-center min-h-[50vh]">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
</div>
}>
<Switch>
<Route path="/">
<Dashboard userId={initialUserId} />
</Route>
<Route path="/mainframe">
<MainframeDashboard userId={initialUserId} />
</Route>
<Route path="/webhooks">
<WebhookManagement />
</Route>
<Route path="/accessibility">
<AccessibilityPage />
</Route>
<Route path="/pricing">
<PricingPage />
</Route>
<Route path="/individual-id">
<IndividualIdPage />
</Route>
<Route path="/demo">
<div className="container mx-auto py-8">
<h1 className="text-3xl font-bold mb-6">Interactive Demo</h1>
<p className="text-muted-foreground mb-8">
Experience the power of NegraRosa Security with our interactive demos
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="border rounded-lg p-6">
<h3 className="text-xl font-medium mb-2">User Experience Demo</h3>
<p className="text-muted-foreground mb-4">
See how verification works from the user's perspective
</p>
<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90">
Try Demo
</button>
</div>
<div className="border rounded-lg p-6">
<h3 className="text-xl font-medium mb-2">Business Integration Demo</h3>
<p className="text-muted-foreground mb-4">
Explore how businesses can integrate our verification system
</p>
<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90">
Try Demo
</button>
</div>
</div>
</div>
</div>
</Route>
<Route path="/sitemap">
<SitemapPage />
</Route>
<Route path="/disaster-recovery">
<DisasterRecoveryPage />
</Route>
<Route path="/stolen-phone">
<DisasterRecoveryPage />
</Route>
<Route path="/emergency">
<DisasterRecoveryPage />
</Route>
<Route path="/security-examples">
<SitemapPage />
</Route>
<Route path="/login">
<div className="container mx-auto py-8">
<div className="max-w-md mx-auto">
<h1 className="text-3xl font-bold mb-6">Login or Register</h1>
<div className="bg-card border rounded-lg p-6 shadow-sm">
<div className="space-y-4">
<div>
<label className="block text-sm font-medium mb-1">Email</label>
<input
type="email"
className="w-full p-2 border rounded-md"
placeholder="your@email.com"
/>
</div>
<div>
<label className="block text-sm font-medium mb-1">Password</label>
<input
type="password"
className="w-full p-2 border rounded-md"
/>
</div>
<button className="w-full bg-primary text-primary-foreground p-2 rounded-md">
Login
</button>
<div className="text-center">
<span className="text-sm text-muted-foreground">
Don't have an account? <a href="#" className="text-primary hover:underline">Register</a>
</span>
</Route>
<Route path="/sitemap">
<SitemapPage />
</Route>
<Route path="/disaster-recovery">
<DisasterRecoveryPage />
</Route>
<Route path="/stolen-phone">
<DisasterRecoveryPage />
</Route>
<Route path="/emergency">
<DisasterRecoveryPage />
</Route>
<Route path="/security-examples">
<SitemapPage />
</Route>
<Route path="/login">
<div className="container mx-auto py-8">
<div className="max-w-md mx-auto">
<h1 className="text-3xl font-bold mb-6">Login or Register</h1>
<div className="bg-card border rounded-lg p-6 shadow-sm">
<div className="space-y-4">
<div>
<label className="block text-sm font-medium mb-1">Email</label>
<input
type="email"
className="w-full p-2 border rounded-md"
placeholder="your@email.com"
/>
</div>
<div>
<label className="block text-sm font-medium mb-1">Password</label>
<input
type="password"
className="w-full p-2 border rounded-md"
/>
</div>
<button className="w-full bg-primary text-primary-foreground p-2 rounded-md">
Login
</button>
<div className="text-center">
<span className="text-sm text-muted-foreground">
Don't have an account? <a href="#" className="text-primary hover:underline">Register</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</Route>
<Route component={NotFound} />
</Switch>
</Route>
<Route component={NotFound} />
</Switch>
</Suspense>
</main>
<Footer />
</div>
Expand Down
Loading