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

React या Next.js app धीमी लगने लगे तो अक्सर वजह initial JavaScript bundle होता है। यूज़र सिर्फ article पढ़ना या CTA दबाना चाहता है, लेकिन browser साथ में admin screen, chart library, editor और media widget भी download कर लेता है।

Code splitting का मतलब है JavaScript को छोटे chunks में बाँटना। Lazy loading का मतलब है किसी chunk को तभी load करना जब user को उसकी ज़रूरत हो। आसान भाषा में, हर visitor को पूरी app का सामान पहले ही नहीं भेजना है।

इस guide में हम Claude Code को सही scope देकर काम करवाते हैं: React.lazy, Suspense, dynamic import(), Next.js का next/dynamic, route/page-level splitting, hydration risk और verification checklist। Performance को पूरा समझने के लिए bundle analysis, tree shaking और performance optimization भी देखें।

पहले terms समझें

bundle browser को भेजा गया JavaScript package है। chunk code splitting के बाद बना छोटा file है। dynamic import जैसे import("./Chart") runtime पर module load करता है। Suspense React की boundary है जो lazy component load होते समय fallback UI दिखाती है।

hydration वह step है जहाँ client-side JavaScript server-rendered HTML में events और state जोड़ता है। Server और client output अलग हो जाए तो hydration error आ सकता है। window, localStorage, current date या random value को बहुत जल्दी render करना common कारण है।

Candidate	क्यों सही है	सावधानी
Admin panels	सभी visitors के लिए जरूरी नहीं	permission और loading state साफ रखें
Charts, maps, editors	dependencies heavy होती हैं	layout shift रोकने के लिए height रखें
Modals, wizards	click के बाद जरूरत होती है	पहला click slow हो तो prefetch करें
Video, search widgets	अक्सर first screen से नीचे होते हैं	accessibility और error message जाँचें

Claude Code को clear task दें

सिर्फ “code splitting कर दो” कहना risky है। Scope, protected UI और verification लिखें।

Goal:
- Heavy UI को lazy-load करना जो first screen के लिए जरूरी नहीं है.
- Hero, article body, navigation और CTA को lazy loading के पीछे नहीं रखना.
- Framework के हिसाब से React.lazy/Suspense या next/dynamic use करना.

Targets:
- src/features/reports/ReportsPanel.tsx
- src/features/editor/RichEditor.tsx
- app/admin/page.tsx

Verification:
- npm run lint
- npm run build
- Network tab में initial JS और lazy chunks check करना.
- Mobile width पर fallback और CTA overlap check करना.

इससे Claude Code revenue path और first-screen content को accidental तरीके से नहीं तोड़ेगा।

React.lazy और Suspense

React docs के अनुसार lazy component code को first render तक defer करता है। Suspense loading के दौरान fallback दिखाता है। Lazy component को module top level पर declare करें, component के अंदर नहीं।

// src/App.tsx
import { Suspense, lazy, useState } from "react";

const ReportsPanel = lazy(() => import("./ReportsPanel"));

function PanelSkeleton() {
  return (
    <div role="status" aria-live="polite" style={{ minHeight: 180 }}>
      Reports load हो रहे हैं...
    </div>
  );
}

export default function App() {
  const [showReports, setShowReports] = useState(false);

  return (
    <main>
      <h1>Dashboard</h1>
      <button type="button" onClick={() => setShowReports(true)}>
        Reports दिखाएँ
      </button>

      {showReports ? (
        <Suspense fallback={<PanelSkeleton />}>
          <ReportsPanel />
        </Suspense>
      ) : (
        <p>Heavy reporting UI जरूरत पड़ने पर ही load होगी.</p>
      )}
    </main>
  );
}

// src/ReportsPanel.tsx
const rows = [
  { label: "Article completion", value: "68%" },
  { label: "CTA clicks", value: "4.2%" },
  { label: "Consultation visits", value: "1.1%" },
];

export default function ReportsPanel() {
  return (
    <section aria-label="Reports">
      <h2>Conversion report</h2>
      <ul>
        {rows.map((row) => (
          <li key={row.label}>
            {row.label}: {row.value}
          </li>
        ))}
      </ul>
    </section>
  );
}

lazy default export expect करता है। Named export के लिए wrapper बनाएँ।

// src/lazyNamed.tsx
import { lazy, type ComponentType } from "react";

export function lazyNamed<TModule, TName extends keyof TModule>(
  loader: () => Promise<TModule>,
  name: TName
) {
  return lazy(async () => {
    const module = await loader();
    return {
      default: module[name] as ComponentType,
    };
  });
}

// src/AnalyticsSlot.tsx
import { Suspense } from "react";
import { lazyNamed } from "./lazyNamed";

const BarChart = lazyNamed(() => import("./charts"), "BarChart");

export function AnalyticsSlot() {
  return (
    <Suspense fallback={<p>Chart load हो रहा है...</p>}>
      <BarChart />
    </Suspense>
  );
}

Next.js dynamic import

Next.js pages और routes के आधार पर code split करता है। किसी heavy Client Component या browser-only editor के लिए next/dynamic use करें। import() को dynamic() के अंदर रखें और declaration module top level पर रखें।

// app/admin/EditorSlot.tsx
"use client";

import dynamic from "next/dynamic";

const RichEditor = dynamic(() => import("./RichEditor"), {
  ssr: false,
  loading: () => (
    <p aria-live="polite" style={{ minHeight: 160 }}>
      Editor load हो रहा है...
    </p>
  ),
});

export default function EditorSlot() {
  return <RichEditor initialMarkdown="# Draft" />;
}

// app/admin/page.tsx
import EditorSlot from "./EditorSlot";

export default function AdminPage() {
  return (
    <main>
      <h1>Article editor</h1>
      <p>Text और CTA पहले render होते हैं. सिर्फ heavy editor delay होता है.</p>
      <EditorSlot />
    </main>
  );
}

ssr: false browser-only UI के लिए ठीक है, लेकिन article text, pricing, FAQ और primary CTA के लिए नहीं। ऐसी चीजें server-rendered HTML में दिखनी चाहिए।

Route और page-level splitting

पहले routes को split करें। Next.js में app/reports/page.tsx और app/settings/page.tsx जैसे page files natural boundary देते हैं। React Router SPA में route components lazy-load किए जा सकते हैं।

// src/AppRouter.tsx
import { Suspense, lazy } from "react";
import { BrowserRouter, Link, Route, Routes } from "react-router-dom";

const HomePage = lazy(() => import("./pages/HomePage"));
const ReportsPage = lazy(() => import("./pages/ReportsPage"));
const SettingsPage = lazy(() => import("./pages/SettingsPage"));

function RouteFallback() {
  return <p aria-live="polite">Page load हो रहा है...</p>;
}

export default function AppRouter() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/reports">Reports</Link>
        <Link to="/settings">Settings</Link>
      </nav>
      <Suspense fallback={<RouteFallback />}>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/reports" element={<ReportsPage />} />
          <Route path="/settings" element={<SettingsPage />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

पूरे landing page को एक बड़े Suspense में न डालें। Headline, value proposition और CTA तुरंत दिखने चाहिए।

Use cases

पहला use case SaaS dashboard है। Basic shell और navigation तुरंत दिखते हैं; admin analytics, audit logs, CSV export और chart library role check के बाद load होते हैं।

दूसरा use case content या course platform है। Article body, lesson title और purchase CTA पहले render होते हैं; Markdown editor, image cropper और preview pane delay हो सकते हैं।

तीसरा use case landing page है जिसमें map, video, calculator या chart है। First screen जल्दी दिखे, heavy widget scroll या click के बाद आए। Media UI के लिए video player और accessibility भी देखें।

चौथा use case quote modal या checkout wizard है। Button तुरंत दिखे, multi-step form demand पर load हो। अगर first click slow लगे तो button viewport में आते ही prefetch करें।

Common pitfalls

1. बहुत ज्यादा splitting करने से छोटे requests बढ़ते हैं और interaction slow हो सकता है।
2. lazy या dynamic को component के अंदर declare करने से state reset हो सकता है।
3. Fallback में fixed height न हो तो layout shift और CTA overlap होता है।
4. Hydration mismatch तब आता है जब server और client अलग output render करते हैं।
5. SEO content या monetization CTA को ssr: false के पीछे रखना नुकसानदेह है।

Verification checklist

Claude Code review request:
- Confirm करो कि lazy/dynamic declarations module top level पर हैं.
- Default export और named export handling check करो.
- Suspense boundary ज्यादा broad तो नहीं है.
- ssr:false SEO copy या CTA को hide तो नहीं कर रहा.
- window/date/random/localStorage hydration risks search करो.
- initial JS, lazy chunks और request count compare करने की steps लिखो.

npm run lint
npm run build

Browser DevTools में Network को JS पर filter करें। Reload पर heavy chunks नहीं आने चाहिए। Report, editor या modal खोलने पर संबंधित chunk आना चाहिए। Mobile width पर fallback और CTA spacing देखें।

Official links और CTA

Official references: React lazy, React Suspense, Next.js Lazy Loading, और Next.js Layouts and Pages।

Repeatable workflow चाहिए तो free Claude Code cheatsheet से शुरू करें। Reusable prompts के लिए 50 Claude Code Prompt Templates उपयोगी हैं। Team rollout, CLAUDE.md, review rules और performance checks के लिए training और consultation देखें।

Hands-on note

सबसे अच्छा परिणाम तब मिला जब पहले तय किया गया कि क्या protect करना है: first-screen copy, navigation और CTA server-rendered रहे; reports और editor lazy chunks में गए। सिर्फ “lazy loading कर दो” कहने पर Suspense boundary बहुत बड़ी हो गई और कुछ जगह unnecessary ssr: false आया।