Bundle Chunk Analyzer

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/devtools/devtools27.tsx instead.

Usage

The file also exports devtools27Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Devtools27, devtools27Demo } from "@/components/blocks/devtools/devtools27";

export default function Page() {
  return <Devtools27 {...devtools27Demo} />;
}

Props

Types

type BundleChunk = {
  name: string;
  sizeKb: number;
  gzipKb: number;
  moduleCount: number;
  /** KB change vs. the previous build. Positive = grew, negative = shrank. */
  deltaKb: number;
};

Behavior notes

• Entirely static server component; sizes, gzip sizes, module counts, and deltas are whatever the caller passes in, there is no real build analysis or file-system reads happening.
• The share-of-bundle percentage bar is computed from each chunk's sizeKb divided by the sum of every chunk's sizeKb in the array, so the percentages only add up to 100% across the chunks you actually pass in.
• The "Large chunk" badge fires whenever sizeKb exceeds a fixed 150 KB threshold hardcoded in the component; it is not configurable via props.
• The change indicator's color polarity is intentionally inverted from a typical KPI: since a bigger chunk is worse for load time, growth (deltaKb > 0) renders red with an up arrow and shrinkage (deltaKb < 0) renders emerald with a down arrow. A deltaKb of exactly 0 renders a neutral "No change" with a dash, in muted gray.