Claude Code के साथ Code Splitting और Lazy Loading Optimize करें

Code Splitting की ज़रूरत

SPA का bundle size बड़ा होने पर initial loading धीमी हो जाती है। Code splitting और lazy loading को सही से implement करने पर, ज़रूरी code सिर्फ ज़रूरत के समय load होता है। Claude Code का उपयोग करके, existing projects में भी efficiently लागू किया जा सकता है।

React.lazy और Suspense

import { lazy, Suspense } from "react";

// Lazy loaded components
const Dashboard = lazy(() => import("./pages/Dashboard"));
const Settings = lazy(() => import("./pages/Settings"));
const Analytics = lazy(() => import("./pages/Analytics"));

function LoadingSpinner() {
  return (
    <div className="flex items-center justify-center h-64">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500" />
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/analytics" element={<Analytics />} />
      </Routes>
    </Suspense>
  );
}

Named Export की Lazy Loading

// Named export को lazy load करने के लिए
const Chart = lazy(() =>
  import("./components/Chart").then((module) => ({
    default: module.BarChart,
  }))
);

// Generic helper
function lazyNamed<T extends Record<string, any>>(
  factory: () => Promise<T>,
  name: keyof T
) {
  return lazy(() =>
    factory().then((module) => ({ default: module[name] }))
  );
}

const PieChart = lazyNamed(
  () => import("./components/Chart"),
  "PieChart"
);

Next.js का dynamic import

import dynamic from "next/dynamic";

// सिर्फ client-side पर load
const RichEditor = dynamic(() => import("./components/RichEditor"), {
  ssr: false,
  loading: () => <p>Editor load हो रहा है...</p>,
});

// Conditional loading
const AdminPanel = dynamic(() => import("./components/AdminPanel"), {
  ssr: false,
});

function Page({ isAdmin }: { isAdmin: boolean }) {
  return (
    <div>
      <h1>Main Content</h1>
      {isAdmin && <AdminPanel />}
    </div>
  );
}

Route-based Splitting

import { lazy, Suspense } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

// हर route के लिए split
const routes = [
  { path: "/", component: lazy(() => import("./pages/Home")) },
  { path: "/about", component: lazy(() => import("./pages/About")) },
  { path: "/blog/*", component: lazy(() => import("./pages/Blog")) },
  {
    path: "/admin/*",
    component: lazy(() => import("./pages/Admin")),
  },
];

function AppRouter() {
  return (
    <BrowserRouter>
      <Suspense fallback={<LoadingSpinner />}>
        <Routes>
          {routes.map(({ path, component: Component }) => (
            <Route key={path} path={path} element={<Component />} />
          ))}
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Prefetch Strategy

// Mouse hover पर prefetch
function PrefetchLink({
  to,
  factory,
  children,
}: {
  to: string;
  factory: () => Promise<any>;
  children: React.ReactNode;
}) {
  const handleMouseEnter = () => {
    factory(); // Prefetch शुरू
  };

  return (
    <Link to={to} onMouseEnter={handleMouseEnter}>
      {children}
    </Link>
  );
}

// Route का prefetch
const dashboardFactory = () => import("./pages/Dashboard");
const DashboardPage = lazy(dashboardFactory);

// Navigation में use
<PrefetchLink to="/dashboard" factory={dashboardFactory}>
  Dashboard
</PrefetchLink>

Bundle Analysis

// webpack-bundle-analyzer की setting
// next.config.js
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer({
  // Next.js की settings
});

# Bundle analysis चलाएं
ANALYZE=true npm run build

Claude Code में उपयोग

Code splitting लागू करने के लिए Claude Code को दिया जाने वाला prompt। Performance improvement के overall approach के लिए SSR vs SSG comparison, development efficiency के लिए productivity 3x करने के 10 Tips भी देखें।

Bundle size optimize करो।
- Route-based code splitting लागू करो
- Heavy libraries (chart.js, moment आदि) को lazy loading में बदलो
- Suspense से loading state को unified करो
- Bundle analyze करके improvement report दो

Code splitting के details के लिए React official documentation देखें। Claude Code के उपयोग के लिए official documentation check करें।

Summary

Code splitting user experience से सीधे जुड़ा performance optimization है। Claude Code से bundle analysis से लेकर implementation तक एक साथ करवाकर, effective splitting points ढूंढकर optimize किया जा सकता है।