mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Will Binns-SmithandGitHub
617ead5753
This adds an interactive Treemap-style bundle analyzer app to the Next.js codebase and writes a copy to disk when `next build --experimental-analyze` is run. * It's a separate app in `apps/bundle-analyzer` as `@next/bundle-analyzer-ui` that uses `output: 'export'` to export a purely static Next.js app * These static resources are copied into Next.js's published `dist` directory in the `next` package itself. Users never depend on `@next/bundle-analyzer-ui` * When users run `next build --experimental-analyze`, these static resources are copied into the user's `.next/diagnostics/analyze` along with the data payloads needed to visualize the user's app In an upcoming PR, we'll add `next experimental-analyze` that will create analysis files without build artifacts, as well as optionally start a static file server. Test Plan: Ran `next build --experimental-analyze` in a test app and ran a static file server to run it.
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import { cn } from '@/lib/utils'
|
|
|
|
export function Skeleton({
|
|
className,
|
|
...props
|
|
}: React.HTMLAttributes<HTMLDivElement>) {
|
|
return (
|
|
<div
|
|
className={cn('animate-pulse rounded-md bg-muted', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function TreemapSkeleton() {
|
|
return (
|
|
<div className="h-full w-full grid grid-cols-12 grid-rows-8 gap-2">
|
|
{/* Simulate treemap blocks with varying sizes */}
|
|
<Skeleton className="col-span-5 row-span-4" />
|
|
<Skeleton className="col-span-4 row-span-3" />
|
|
<Skeleton className="col-span-3 row-span-3" />
|
|
<Skeleton className="col-span-4 row-span-1" />
|
|
<Skeleton className="col-span-3 row-span-2" />
|
|
<Skeleton className="col-span-3 row-span-4" />
|
|
<Skeleton className="col-span-2 row-span-2" />
|
|
<Skeleton className="col-span-2 row-span-2" />
|
|
<Skeleton className="col-span-3 row-span-2" />
|
|
<Skeleton className="col-span-4 row-span-2" />
|
|
<Skeleton className="col-span-2 row-span-2" />
|
|
<Skeleton className="col-span-3 row-span-2" />
|
|
</div>
|
|
)
|
|
}
|