Code Splitting and Lazy Loading

Real-World Implementation Examples

1. E-commerce Application

// E-commerce app with optimized loading
const ProductList = React.lazy(() => import('./pages/ProductList'));
const ProductDetail = React.lazy(() => import('./pages/ProductDetail'));
const Cart = React.lazy(() => import('./pages/Cart'));
const Checkout = React.lazy(() => import('./pages/Checkout'));

// Preload checkout when items are added to cart
function CartButton({ itemCount, onClick }) {
  const handleClick = () => {
    onClick();
    
    // Preload checkout page when user shows purchase intent
    if (itemCount > 0) {
      import('./pages/Checkout');
    }
  };
  
  return (
    <button onClick={handleClick}>
      Cart ({itemCount})
    </button>
  );
}

// Product page with progressive loading
function ProductPage({ productId }) {
  const [product, setProduct] = useState(null);
  const [showReviews, setShowReviews] = useState(false);
  
  // Load product data first
  useEffect(() => {
    fetchProduct(productId).then(setProduct);
  }, [productId]);
  
  // Lazy load heavy components
  const ProductGallery = React.lazy(() => import('./components/ProductGallery'));
  const ProductReviews = React.lazy(() => import('./components/ProductReviews'));
  const RelatedProducts = React.lazy(() => import('./components/RelatedProducts'));
  
  if (!product) return <LoadingSpinner />;
  
  return (
    <div className="product-page">
      {/* Critical content loads immediately */}
      <h1>{product.name}</h1>
      <p>{product.price}</p>
      <button>Add to Cart</button>
      
      {/* Gallery loads when visible */}
      <Suspense fallback={<div>Loading gallery...</div>}>
        <ProductGallery images={product.images} />
      </Suspense>
      
      {/* Reviews load on demand */}
      <button onClick={() => setShowReviews(true)}>
        Show Reviews ({product.reviewCount})
      </button>
      
      {showReviews && (
        <Suspense fallback={<div>Loading reviews...</div>}>
          <ProductReviews productId={productId} />
        </Suspense>
      )}
      
      {/* Related products load after main content */}
      <Suspense fallback={<div>Loading related products...</div>}>
        <RelatedProducts category={product.category} />
      </Suspense>
    </div>
  );
}

2. Dashboard Application

// Dashboard with progressive enhancement
function Dashboard() {
  const [user, setUser] = useState(null);
  const [activeWidgets, setActiveWidgets] = useState(['summary']);
  
  // Lazy load dashboard widgets
  const widgets = {
    summary: React.lazy(() => import('./widgets/Summary')),
    analytics: React.lazy(() => import('./widgets/Analytics')),
    reports: React.lazy(() => import('./widgets/Reports')),
    calendar: React.lazy(() => import('./widgets/Calendar')),
    tasks: React.lazy(() => import('./widgets/Tasks')),
  };
  
  // Preload commonly used widgets
  useEffect(() => {
    // Preload analytics and reports for power users
    if (user?.isPowerUser) {
      import('./widgets/Analytics');
      import('./widgets/Reports');
    }
  }, [user]);
  
  const addWidget = (widgetName) => {
    setActiveWidgets(prev => [...prev, widgetName]);
  };
  
  return (
    <div className="dashboard">
      <h1>Dashboard</h1>
      
      <div className="widget-selector">
        {Object.keys(widgets).map(widgetName => (
          <button
            key={widgetName}
            onClick={() => addWidget(widgetName)}
            disabled={activeWidgets.includes(widgetName)}
          >
            Add {widgetName}
          </button>
        ))}
      </div>
      
      <div className="widgets-grid">
        {activeWidgets.map(widgetName => {
          const Widget = widgets[widgetName];
          return (
            <div key={widgetName} className="widget-container">
              <ErrorBoundary>
                <Suspense fallback={<WidgetSkeleton />}>
                  <Widget />
                </Suspense>
              </ErrorBoundary>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// Widget skeleton for loading states
function WidgetSkeleton() {
  return (
    <div className="widget-skeleton">
      <div className="skeleton-header" />
      <div className="skeleton-content">
        <div className="skeleton-line" />
        <div className="skeleton-line" />
        <div className="skeleton-line" />
      </div>
    </div>
  );
}

3. Content Management System

// CMS with role-based code splitting
function CMS() {
  const { user } = useAuth();
  
  // Load components based on user role
  const getEditorComponent = () => {
    switch (user.role) {
      case 'admin':
        return React.lazy(() => import('./editors/AdminEditor'));
      case 'editor':
        return React.lazy(() => import('./editors/ContentEditor'));
      case 'author':
        return React.lazy(() => import('./editors/BasicEditor'));
      default:
        return React.lazy(() => import('./editors/ViewOnly'));
    }
  };
  
  const Editor = getEditorComponent();
  
  // Preload plugins based on user preferences
  useEffect(() => {
    if (user.preferences.includes('markdown')) {
      import('./plugins/MarkdownPlugin');
    }
    if (user.preferences.includes('codeHighlight')) {
      import('./plugins/CodeHighlightPlugin');
    }
  }, [user.preferences]);
  
  return (
    <div className="cms">
      <Suspense fallback={<EditorSkeleton />}>
        <Editor />
      </Suspense>
    </div>
  );
}

// Plugin system with dynamic loading
function PluginSystem({ content, enabledPlugins }) {
  const [plugins, setPlugins] = useState({});
  
  useEffect(() => {
    const loadPlugins = async () => {
      const loadedPlugins = {};
      
      for (const pluginName of enabledPlugins) {
        try {
          const module = await import(`./plugins/${pluginName}`);
          loadedPlugins[pluginName] = module.default;
        } catch (error) {
          console.error(`Failed to load plugin: ${pluginName}`, error);
        }
      }
      
      setPlugins(loadedPlugins);
    };
    
    loadPlugins();
  }, [enabledPlugins]);
  
  // Apply plugins to content
  let processedContent = content;
  Object.values(plugins).forEach(plugin => {
    if (plugin.process) {
      processedContent = plugin.process(processedContent);
    }
  });
  
  return (
    <div className="plugin-system">
      {processedContent}
    </div>
  );
}