Claude Code से Vite, Astro और Next.js Bundle Analysis

JavaScript bundle एक ही गलती से भारी नहीं होता। आम तौर पर यह छोटे-छोटे सही दिखने वाले बदलावों से बढ़ता है: admin chart, rich text editor, date library, map, video player, auth SDK और A/B testing code। समस्या feature में नहीं है। समस्या तब आती है जब पहली page load पर वह code भी भेज दिया जाता है जिसकी user को अभी जरूरत नहीं है।

Bundle analysis का मतलब है production build खोलकर देखना कि browser को सच में क्या भेजा जा रहा है। आसान भाषा में, यह suitcase का वजन मापने और फिर देखने जैसा है कि कौन सा सामान सबसे भारी है। Claude Code इस काम में मदद कर सकता है, लेकिन prompt साफ होना चाहिए: पहले measure करो, फिर कारण बताओ, फिर छोटा change करो, फिर verify करो, और अंत में CI budget लगाओ।

यह guide Vite, Astro और Next.js जैसे projects के लिए है। इसमें rollup-plugin-visualizer, source-map-explorer, duplicate packages, dynamic import, CI bundle budget और Claude Code review workflow शामिल हैं। संबंधित guides के लिए code splitting, tree shaking और performance optimization भी देखें।

Workflow समझें

Analysis में raw, gzip और brotli size दिखते हैं। raw diagram पढ़ने में मदद करता है। gzip और brotli network transfer के करीब हैं। फिर भी सिर्फ size देखकर फैसला न करें, क्योंकि कुछ packages compress तो अच्छे से होते हैं लेकिन parse और execute करने में महंगे होते हैं।

flowchart LR
  A["production build"] --> B["visual report"]
  B --> C["duplicate packages"]
  C --> D["replace or dedupe"]
  B --> E["route-level split"]
  D --> F["bundle budget in CI"]
  E --> F
  F --> G["Claude Code review"]

काम करते समय official docs को आधार बनाएं: Vite का Building for Production, Astro का Analyze bundle size, Next.js का Package Bundling, web.dev का Performance budgets 101, और Claude Code official overview।

Vite और Astro report

Vite में शुरुआत के लिए rollup-plugin-visualizer अच्छा है। यह HTML treemap बनाता है जिससे heavy packages साफ दिखते हैं।

npm install -D rollup-plugin-visualizer

// vite.config.ts
import { defineConfig } from "vite";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [
    visualizer({
      filename: "dist/bundle-stats.html",
      template: "treemap",
      gzipSize: true,
      brotliSize: true,
      open: false
    })
  ],
  build: {
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          react: ["react", "react-dom"],
          charts: ["recharts"],
          editor: ["@tiptap/react", "@tiptap/starter-kit"]
        }
      }
    }
  }
});

Astro में इसे vite config के अंदर रखें:

// astro.config.mjs
import { defineConfig } from "astro/config";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  vite: {
    plugins: [
      visualizer({
        filename: "dist/bundle-stats.html",
        template: "treemap",
        gzipSize: true,
        brotliSize: true
      })
    ],
    build: { sourcemap: true }
  }
});

npm run build
open dist/bundle-stats.html

Windows PowerShell में:

start dist/bundle-stats.html

Report में पहले उन चीजों को देखें जो first view में जरूरी नहीं हैं: admin charts, editor, map, video player, Markdown processor, बड़ी date library, और internal dashboard UI।

Source map और Next.js

source-map-explorer generated JS और source map से बताता है कि bundle के हिस्से कहां से आए।

npm install -D source-map-explorer
npm run build
npx source-map-explorer "dist/assets/*.js" --html dist/source-map-report.html

Next.js में पहले version और builder देखें। जरूरत होने पर @next/bundle-analyzer लगाएं।

// next.config.mjs
import bundleAnalyzer from "@next/bundle-analyzer";

const withBundleAnalyzer = bundleAnalyzer({
  enabled: process.env.ANALYZE === "true"
});

export default withBundleAnalyzer({
  reactStrictMode: true
});

npm install -D @next/bundle-analyzer
ANALYZE=true npm run build

PowerShell:

$env:ANALYZE="true"; npm run build

Duplicate dependencies

Heavy library diagram में दिख जाती है, लेकिन duplicate package छुप सकता है। जैसे date-fns की दो versions, lodash और lodash-es दोनों, या गलत peer dependency।

npm ls date-fns lodash lodash-es
npm dedupe

pnpm में:

pnpm why date-fns
pnpm dedupe

Claude Code को ऐसा prompt दें:

इस repository के production bundle को analyze करें।
1. dist/bundle-stats.html या source-map-explorer से heavy dependencies list करें
2. npm ls या pnpm why से duplicate packages देखें
3. candidates को replace, dedupe, dynamic import, remove में बांटें
4. existing UI, SEO text, CTA और analytics events न तोड़ें
5. सबसे छोटा safe change करें और npm run build plus bundle budget check चलाएं

कारण	समाधान	merge से पहले check
हर page पर moment	Intl.DateTimeFormat या छोटा helper	timezone और locale
पूरा lodash import	function import या native API	ESM/CommonJS mix
admin editor भारी	click के बाद load	loading और error UI
home में chart library	reports route में split	responsive layout
package versions duplicate	dedupe या version align	peer dependency

dynamic import

dynamic import code हटाता नहीं है, बल्कि उसे बाद में load करता है। यह admin reports, rich editor, map और rare modal के लिए अच्छा है।

// src/features/reports/ReportsButton.tsx
import { useState } from "react";

export function ReportsButton() {
  const [html, setHtml] = useState<string>("");
  const [loading, setLoading] = useState(false);

  async function handleClick() {
    setLoading(true);
    const { renderRevenueReport } = await import("./renderRevenueReport");
    setHtml(renderRevenueReport([12000, 18400, 9300]));
    setLoading(false);
  }

  return (
    <section>
      <button type="button" onClick={handleClick} disabled={loading}>
        {loading ? "Report बन रहा है" : "Revenue report देखें"}
      </button>
      <output aria-live="polite">{html}</output>
    </section>
  );
}

// src/features/reports/renderRevenueReport.ts
export function renderRevenueReport(values: number[]): string {
  const total = values.reduce((sum, value) => sum + value, 0);
  return `Monthly total: ${new Intl.NumberFormat("hi-IN").format(total)} INR`;
}

Next.js में SEO text, price, purchase link और consultation CTA को server-rendered रखें। सिर्फ heavy editor को delay करें।

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

import dynamic from "next/dynamic";

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

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

CI budget

एक बार optimize करने से काम पूरा नहीं होता। अगली PR फिर bundle बढ़ा सकती है। इसलिए CI budget लगाएं।

// scripts/check-bundle-budget.mjs
import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
import path from "node:path";
import { brotliCompressSync, gzipSync } from "node:zlib";

const targetDir = "dist/assets";
const maxTotalGzip = 220 * 1024;
const maxSingleGzip = 140 * 1024;

function walk(dir) {
  return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
    const fullPath = path.join(dir, entry.name);
    if (entry.isDirectory()) return walk(fullPath);
    return /\.(js|css)$/.test(entry.name) ? [fullPath] : [];
  });
}

if (!existsSync(targetDir)) {
  console.error(`Missing ${targetDir}. Run npm run build first.`);
  process.exit(1);
}

const rows = walk(targetDir).map((file) => {
  const content = readFileSync(file);
  return {
    file,
    raw: statSync(file).size,
    gzip: gzipSync(content).byteLength,
    brotli: brotliCompressSync(content).byteLength
  };
});

const totalGzip = rows.reduce((sum, row) => sum + row.gzip, 0);
const tooLarge = rows.filter((row) => row.gzip > maxSingleGzip);

if (totalGzip > maxTotalGzip || tooLarge.length > 0) {
  console.error(`Bundle budget failed. total gzip=${totalGzip} bytes`);
  process.exit(1);
}

console.log(`Bundle budget passed. total gzip=${totalGzip} bytes`);

# .github/workflows/bundle-budget.yml
name: Bundle Budget
on: [pull_request]
jobs:
  bundle-budget:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm run build
      - run: node scripts/check-bundle-budget.mjs

पहला budget बहुत आदर्श न रखें। current gzip size में लगभग 10% buffer जोड़ें और PR में कारण लिखवाएं।

Real use cases

पहला case SaaS admin dashboard है। List, search, navigation और main CTA जल्दी दिखने चाहिए। Admin charts, audit logs, CSV export और billing report अलग chunk में जा सकते हैं।

दूसरा case content या course site है। Article body, purchase links और consultation CTA जल्दी render होने चाहिए। Markdown preview, image crop और campaign admin बाद में load हो सकते हैं। Revenue path को analytics implementation से measure करें।

तीसरा case landing page है जिसमें map, video, calculator या diagnostic form हो। First view में offer, price, proof और action रहें। Heavy widgets scroll या click के बाद load हों। Media UI के लिए video player और form के लिए accessibility देखें।

चौथा case internal UI library है। @company/ui से Button import करने पर DatePicker, Modal, Chart और icons भी आ सकते हैं। exports अलग करें और CSS/theme side effects साफ लिखें।

गलतियां और सावधानी

Dev build से size न मापें। हर छोटे component को अलग chunk न बनाएं। Source maps को public CDN पर रखने से पहले security policy तय करें। manualChunks को हमेशा के लिए fix न मानें। Dependency बदलने पर उसे फिर review करें।

Implementation के बाद Claude Code से review करवाएं:

इस PR को bundle analysis के हिसाब से review करें।
- first-load dependencies सच में जरूरी हैं?
- duplicate package versions हैं?
- dynamic imports में loading और error state है?
- SEO text, price, CTA, analytics late chunks में तो नहीं गए?
- bundle budget failure log कारण खोजने में मदद करता है?
- npm run build और report paths summarize करें।

Monetization path

Bundle analysis सिर्फ engineering cleanup नहीं है। First render तेज होगा तो article text, product links, free resources और consultation CTA जल्दी दिखेंगे। ClaudeCodeLab जैसे site में इसका असर ads, template sales और training inquiries पर पड़ता है।

Practice के लिए free cheat sheet से शुरू करें। Reusable prompts और templates के लिए products देखें। Team को Vite, Astro, Next.js, CLAUDE.md, CI और review rules साथ में set करने हों तो Claude Code training and consultation बेहतर रास्ता है।

Practical verification

इस article के examples को Vite/React style setup के हिसाब से check किया गया: visualizer HTML report बनाता है, source-map-explorer source maps मांगता है, और budget script केवल built-in fs, path, zlib use करता है। Practical lesson यह था कि हर बड़ी library हटाने से पहले first-load content और delayed UI को अलग करें। Editors और charts अच्छे candidates हैं; text, price, purchase link और consultation CTA आम तौर पर delay नहीं होने चाहिए।

Summary

Claude Code के साथ bundle optimization evidence से शुरू होता है: production build, visual report, duplicate check, dynamic import, CI budget और review। Bundle analysis, tree shaking और code splitting अलग-अलग tasks नहीं हैं; ये traffic और revenue बढ़ने के बाद भी app को fast रखने की एक ही workflow हैं।