🚀 Feature: Optimize Bundle Size Using Lazy Loading and Code Splitting

[JayRathore10]

🔖 Feature description

[FEAT] Optimize Bundle Size Using Lazy Loading and Code Splitting

Description

The production build generates a large JavaScript bundle:

dist/assets/index-C9N3at7P.js 670.53 kB │ gzip: 215.05 kB

Vite shows the following warning during build:

Some chunks are larger than 500 kB after minification.

This can negatively affect:

• Initial page load time
• Performance on slow networks
• Lighthouse performance score
• Mobile user experience

Proposed Solution

Implement lazy loading and route-based code splitting using React.lazy() and Suspense.

Example:

const About = React.lazy(() => import("./pages/About"));

Additionally, optimize bundle splitting using Vite Rollup manual chunks if required.

Tasks

• Convert heavy pages/components to lazy imports
• Add Suspense fallback loaders
• Reduce initial bundle size
• Improve overall application performance

Expected Outcome

• Smaller initial JS bundle
• Faster loading speed
• Reduced Vite chunk warnings
• Better performance metrics

Tech Stack

• React
• Vite
• TypeScript

🏷️ Open Source Context

This issue is being worked on as part of GSSoC contribution.

🎤 Screenshot

No response

🔄️ Additional Information

No response

[JayRathore10]

@mehul-m-prajapati
/assign

I am a GSSoC contributor. Please assign this issue to me.