Skip to content

Performance Overhaul: Route-Based Splitting & Strategic Bundle Chunking

Choose a tag to compare

View all tags
@CyberSphinxxx CyberSphinxxx released this 02 Jan 22:31
· 9 commits to main since this release
v3.3.0
b107b5e

Description

Implemented a comprehensive performance optimization strategy to enhance load times and caching efficiency. This update introduces route-based code splitting to reduce the initial bundle size and configures Vite/Rollup with strategic manual chunking to isolate heavy dependencies for better long-term caching.

Changes Made

  • Route-Based Code Splitting:
    • App Refactoring (App.tsx): Converted 8 core components to lazy imports using React.lazy (Dashboard, Overview, Projects, Community, Settings, Profile, PublicProfile, and Editor).
    • Suspense Integration: Wrapped lazy-loaded routes with Suspense logic.
    • Static Entry: Maintained LandingPage as a static import to ensure instant initial loading.
    • UI Feedback: Created a LoadingSpinner component to provide visual feedback during route chunk downloads.
  • Bundle Configuration (vite.config.ts):
    • Configured build.rollupOptions.output.manualChunks to split dependencies into three strategic chunks:
      • monaco-editor (Code editor wrapper)
      • firebase (Firebase SDK)
      • vendor (React, ReactDOM, Framer Motion)

How It Works

  • Lazy Loading: The application now separates route logic into 8 distinct chunks. When a user navigates to a route, the browser downloads only the necessary code on demand, utilizing the LoadingSpinner for transition states.
  • Chunk Strategy: Instead of a single monolithic bundle, stable dependencies (Vendor, Firebase, Monaco) are now split into separate files. This allows the browser to cache these heavy libraries independently, meaning application code updates won't force users to re-download unchanged vendor libraries.

Notes

Build Verification & Results:

  • ✅ Landing Page: Loads instantly (no spinner).
  • ✅ Route Chunks: 8 routes verified as lazy-loaded on demand.
  • ✅ Asset Sizes (dist/assets/):
    • monaco-editor.js: ~14 KB
    • firebase.js: ~240 KB
    • vendor.js: ~341 KB

Performance Impact:

  • Smaller Downloads: Users only download what they need for the current view.
  • Better Caching: Vendor libs are cached separately from app code.
  • Faster Rebuilds: Stable dependencies do not require rebuilding during development.

Full Changelog: v3.2.0...v3.3.0

Assets 2
Loading