⚡ Code Splitting & Lazy Loading

Answer:

React.lazy(): Ek function hai jo dynamic import ko accept karta hai aur ek React component return karta hai. Yeh component tab load hota hai jab woh pehli baar render hone wala ho.

Suspense: Ek component hai jo lazy components ke loading state ko handle karta hai. Jab tak lazy component load nahi hota, tab tak Suspense apna fallback UI show karta hai.

Working:
1. React.lazy() ek Promise return karta hai
2. Jab component render hota hai, React us Promise ko resolve karta hai
3. Tab tak Suspense fallback show karta hai
4. Promise resolve hone ke baad actual component render hota hai

Example:
const MyComponent = lazy(() => import('./MyComponent'));
<Suspense fallback={<Loading />}><MyComponent /></Suspense>

Important: React.lazy sirf default exports ke saath kaam karta hai.

Answer:

Benefits:
1. Faster Initial Load: Kam code download = Faster page load
2. Better Performance: Browser ko kam JavaScript parse karna padta hai
3. Improved Caching: Individual chunks cache ho sakte hain
4. Reduced Bandwidth: Users sirf zaroorat ka code download karte hain
5. Better User Experience: Content jaldi dikhta hai

Real-World Example - E-commerce Site:

Without Code Splitting:
• Initial bundle: 800 KB
• Load time: 4.5 seconds
• User ko sab kuch download karna padta hai (admin panel, checkout, product reviews, etc.)

With Code Splitting:
• Initial bundle: 150 KB (home page)
• Load time: 1.2 seconds
• Admin panel (200 KB) - sirf admin users ke liye load hota hai
• Checkout (100 KB) - sirf jab user checkout pe jaye
• Product reviews (80 KB) - sirf jab user reviews tab khole

Result: 70% faster initial load, better conversion rate!

Answer:

Route-based Code Splitting:
• Har route (page) ko alag chunk mein split karte hain
• User jab route change karta hai tab load hota hai
• Sabse common aur recommended approach
• Natural split point hai application mein

Example:
const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));

Component-based Code Splitting:
• Individual heavy components ko split karte hain
• Component jab render hone wala ho tab load hota hai
• Specific use cases ke liye
• Fine-grained control milta hai

Example:
const ChartComponent = lazy(() => import('./Chart'));
const RichTextEditor = lazy(() => import('./Editor'));

Kab Kaunsa Use Karein:

Route-based use karo jab:
• Application mein multiple pages hain
• Clear navigation structure hai
• Har page independent functionality hai
• Starting point chahiye code splitting ke liye

Component-based use karo jab:
• Heavy third-party libraries use kar rahe ho (charts, editors)
• Conditional rendering hai (modals, tabs)
• User interaction ke baad load karna hai
• Route-based splitting ke saath combine karke

Best Practice: Dono ko combine karo - routes ko split karo, aur heavy components ko bhi!

Answer:

splitChunks Configuration:
Webpack ka optimization feature hai jo automatically code ko multiple chunks mein divide karta hai based on certain rules.

Key Options:
• chunks: 'all' - All chunks ko split karo (async + sync)
• minSize - Minimum chunk size
• maxSize - Maximum chunk size
• minChunks - Kitni baar use hona chahiye
• cacheGroups - Custom splitting rules

Vendor Chunks Kyun Important Hain:

1. Caching Benefits:
• Third-party libraries rarely change hoti hain
• Ek baar load ho gayi toh cache mein reh sakti hain
• Har deployment pe users ko download nahi karni padti

2. Parallel Loading:
• Browser multiple chunks parallel mein download kar sakta hai
• Vendor chunk aur app chunk simultaneously load ho sakte hain

3. Better Organization:
• Your code aur third-party code separate
• Debugging aur analysis easy ho jata hai

4. Optimal Size:
• Large vendor libraries ko separate rakhne se main bundle chhota rehta hai

Example Configuration:

splitChunks: {
  cacheGroups: {
    vendor: {
      test: /[\\/]node_modules[\\/]/,
      name: 'vendors',
      chunks: 'all',
      priority: 10
    },
    react: {
      test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
      name: 'react',
      priority: 20
    }
  }
}

Result:
• main.js (50 KB) - Your app code
• react.js (120 KB) - React libraries (cached)
• vendors.js (200 KB) - Other libraries (cached)
• Total initial: 370 KB, but 320 KB cached on repeat visits!

Answer:

Prefetching:
• Low priority resource loading
• Browser idle hone pe load hota hai
• Future navigation ke liye
• <link rel="prefetch">

Preloading:
• High priority resource loading
• Immediately load hota hai
• Current page ke liye critical resources
• <link rel="preload">

Detailed Comparison:

Feature	Prefetch	Preload
Priority	Low	High
When	Browser idle time	Immediately
Use Case	Future pages	Current page
Cache	HTTP cache	Memory cache

Kab Prefetch Use Karein:
• Next page jo user visit kar sakta hai
• Dashboard link pe hover karne pe
• Login ke baad dashboard prefetch karo
• Analytics se predict karo user kahan jayega

Example:
const Dashboard = lazy(() => import(/* webpackPrefetch: true */ './Dashboard'));

Kab Preload Use Karein:
• Critical fonts jo immediately chahiye
• Above-the-fold images
• Critical CSS
• Hero section resources

Example:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

⚠️ Warning: Preload ka overuse mat karo, warna bandwidth waste hoga aur actual performance kharab ho jayega!

Answer:

Image Lazy Loading Approaches:

1. Native Lazy Loading:
• HTML attribute: loading="lazy"
• Browser built-in support
• Sabse simple approach
• Limited customization
<img src="image.jpg" loading="lazy" alt="Description">

2. Intersection Observer API:
• Modern JavaScript API
• Viewport visibility detect karta hai
• Highly customizable
• Better performance than scroll events

Intersection Observer Detailed Explanation:

Kya Hai:
Ek API jo asynchronously observe karta hai ki ek element viewport mein visible hai ya nahi. Yeh scroll events se better hai kyunki yeh main thread ko block nahi karta.

Kaise Kaam Karta Hai:
1. Observer create karo with callback function
2. Target elements ko observe karo
3. Jab element viewport mein aaye, callback trigger hota hai
4. Callback mein image load karo
5. Observer disconnect karo

Implementation:

const imageObserver = new IntersectionObserver(
  (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src; // Load actual image
        img.classList.add('loaded');
        observer.unobserve(img); // Stop observing
      }
    });
  },
  {
    root: null, // viewport
    rootMargin: '50px', // Load 50px before visible
    threshold: 0.1 // 10% visible hone pe trigger
  }
);

// Observe all lazy images
document.querySelectorAll('img[data-src]').forEach(img => {
  imageObserver.observe(img);
});

3. React Implementation:

const LazyImage = ({ src, alt }) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [isInView, setIsInView] = useState(false);
  const imgRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsInView(true);
          observer.disconnect();
        }
      },
      { threshold: 0.1, rootMargin: '100px' }
    );

    if (imgRef.current) {
      observer.observe(imgRef.current);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <div ref={imgRef}>
      {isInView ? (
        <img 
          src={src} 
          alt={alt}
          onLoad={() => setIsLoaded(true)}
          style={{ 
            opacity: isLoaded ? 1 : 0,
            transition: 'opacity 0.3s'
          }}
        />
      ) : (
        <div className="placeholder">Loading...</div>
      )}
    </div>
  );
};

4. Progressive Image Loading:
• Pehle low-quality placeholder load karo
• Phir high-quality image load karo
• Smooth transition effect

Benefits of Intersection Observer:
• No scroll event listeners (better performance)
• Asynchronous (non-blocking)
• Customizable thresholds
• Root margin for early loading
• Multiple elements efficiently observe kar sakta hai

Browser Support: 95%+ modern browsers (polyfill available for older browsers)

Answer:

Code Splitting Failures Kyun Hoti Hain:
• Network issues (slow/unstable connection)
• Chunk files not found (deployment issues)
• Browser cache issues
• CDN failures
• Version mismatches

Comprehensive Error Handling Strategy:

1. Error Boundary Implementation:

class LazyLoadErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      hasError: false, 
      error: null,
      retryCount: 0 
    };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // Log to error tracking service
    console.error('Lazy load failed:', error, errorInfo);
    
    // Send to analytics
    analytics.track('lazy_load_error', {
      error: error.message,
      component: this.props.componentName,
      retryCount: this.state.retryCount
    });
  }

  handleRetry = () => {
    this.setState(prevState => ({
      hasError: false,
      error: null,
      retryCount: prevState.retryCount + 1
    }));
  };

  handleReload = () => {
    window.location.reload();
  };

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-container">
          <h2>Failed to load component</h2>
          <p>{this.state.error?.message}</p>
          
          {this.state.retryCount < 3 ? (
            <button onClick={this.handleRetry}>
              Retry ({this.state.retryCount}/3)
            </button>
          ) : (
            <button onClick={this.handleReload}>
              Reload Page
            </button>
          )}
        </div>
      );
    }

    return this.props.children;
  }
}

2. Retry Mechanism with Exponential Backoff:

const lazyWithRetry = (componentImport, retries = 3, interval = 1000) => {
  return new Promise((resolve, reject) => {
    componentImport()
      .then(resolve)
      .catch((error) => {
        if (retries === 0) {
          reject(error);
          return;
        }

        setTimeout(() => {
          console.log(`Retrying... (${retries} attempts left)`);
          lazyWithRetry(componentImport, retries - 1, interval * 2)
            .then(resolve)
            .catch(reject);
        }, interval);
      });
  });
};

// Usage
const Dashboard = lazy(() => 
  lazyWithRetry(() => import('./Dashboard'))
);

3. Fallback Component Strategy:

const LazyComponentWrapper = ({ 
  importFunc, 
  fallbackComponent: FallbackComponent 
}) => {
  const [Component, setComponent] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    importFunc()
      .then(module => setComponent(() => module.default))
      .catch(err => {
        setError(err);
        // Load fallback
        if (FallbackComponent) {
          setComponent(() => FallbackComponent);
        }
      });
  }, []);

  if (error && !Component) {
    return <ErrorDisplay error={error} />;
  }

  if (!Component) {
    return <LoadingSpinner />;
  }

  return <Component />;
};

4. Version Mismatch Detection:

// Store app version in localStorage
const APP_VERSION = '1.2.3';

const checkVersion = () => {
  const storedVersion = localStorage.getItem('appVersion');
  
  if (storedVersion && storedVersion !== APP_VERSION) {
    // New version deployed, clear cache
    if ('caches' in window) {
      caches.keys().then(names => {
        names.forEach(name => caches.delete(name));
      });
    }
    localStorage.setItem('appVersion', APP_VERSION);
    window.location.reload(true);
  } else {
    localStorage.setItem('appVersion', APP_VERSION);
  }
};

// Call on app initialization
checkVersion();

5. Monitoring & Analytics:

const trackLazyLoadMetrics = (componentName, success, loadTime, error) => {
  // Send to analytics service
  analytics.track('lazy_load_metrics', {
    component: componentName,
    success: success,
    loadTime: loadTime,
    error: error?.message,
    userAgent: navigator.userAgent,
    connection: navigator.connection?.effectiveType,
    timestamp: Date.now()
  });
};

6. Complete Production Setup:

// App.js
function App() {
  return (
    <LazyLoadErrorBoundary componentName="App">
      <Suspense fallback={<LoadingScreen />}>
        <Router>
          <Routes>
            <Route 
              path="/dashboard" 
              element={
                <LazyLoadErrorBoundary componentName="Dashboard">
                  <Suspense fallback={<PageLoader />}>
                    <Dashboard />
                  </Suspense>
                </LazyLoadErrorBoundary>
              } 
            />
          </Routes>
        </Router>
      </Suspense>
    </LazyLoadErrorBoundary>
  );
}

Best Practices:
• Multiple layers of error boundaries
• Automatic retry with exponential backoff
• User-friendly error messages
• Analytics tracking for monitoring
• Version checking mechanism
• Graceful degradation with fallbacks
• Clear cache on version updates
• Network status detection

Result: Robust production app jo failures ko gracefully handle karta hai aur users ko smooth experience deta hai!