Skip to content

Commit a8e81be

Browse files
wbinnssmithwbinnssmith
committed
Initial commit of bundle analyzer ui
1 parent 28a14da commit a8e81be

34 files changed

+5026
-60
lines changed

‎apps/bundle-analyzer/README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Bundle Analyzer
2+
3+
A Next.js application for visualizing bundle sizes and analyzing dependencies using interactive treemaps.
4+
5+
This package is not published to npm. Instead it's built and vendored into the main `next` package during its build process.
6+
7+
8+
## Features
9+
10+
- 📊 **Interactive Treemap**: Visualize bundle sizes with an interactive treemap interface
11+
- 🎯 **Route-based Analysis**: Analyze bundle data for specific routes in your application
12+
- 🔍 **Dependency Tracking**: View import chains and dependency relationships
13+
- 🎨 **Filter Controls**: Filter by environment (client/server) and file types (JS/CSS/JSON/Assets)
14+
- 🔎 **Search Functionality**: Search through files in your bundle

‎apps/bundle-analyzer/app/globals.css‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
@import 'tailwindcss';
2+
@import 'tw-animate-css';
3+
4+
@custom-variant dark (&:is(.dark *));
5+
6+
:root {
7+
--background: oklch(1 0 0);
8+
--foreground: oklch(0.145 0 0);
9+
--card: oklch(1 0 0);
10+
--card-foreground: oklch(0.145 0 0);
11+
--popover: oklch(1 0 0);
12+
--popover-foreground: oklch(0.145 0 0);
13+
--primary: oklch(0.205 0 0);
14+
--primary-foreground: oklch(0.985 0 0);
15+
--secondary: oklch(0.97 0 0);
16+
--secondary-foreground: oklch(0.205 0 0);
17+
--muted: oklch(0.97 0 0);
18+
--muted-foreground: oklch(0.556 0 0);
19+
--accent: oklch(0.97 0 0);
20+
--accent-foreground: oklch(0.205 0 0);
21+
--destructive: oklch(0.577 0.245 27.325);
22+
--destructive-foreground: oklch(0.577 0.245 27.325);
23+
--border: oklch(0.922 0 0);
24+
--input: oklch(0.922 0 0);
25+
--ring: oklch(0.708 0 0);
26+
--radius: 0.625rem;
27+
--sidebar: oklch(0.985 0 0);
28+
--sidebar-foreground: oklch(0.145 0 0);
29+
--sidebar-primary: oklch(0.205 0 0);
30+
--sidebar-primary-foreground: oklch(0.985 0 0);
31+
--sidebar-accent: oklch(0.97 0 0);
32+
--sidebar-accent-foreground: oklch(0.205 0 0);
33+
--sidebar-border: oklch(0.922 0 0);
34+
--sidebar-ring: oklch(0.708 0 0);
35+
}
36+
37+
.dark {
38+
--background: oklch(0.145 0 0);
39+
--foreground: oklch(0.985 0 0);
40+
--card: oklch(0.145 0 0);
41+
--card-foreground: oklch(0.985 0 0);
42+
--popover: oklch(0.145 0 0);
43+
--popover-foreground: oklch(0.985 0 0);
44+
--primary: oklch(0.985 0 0);
45+
--primary-foreground: oklch(0.205 0 0);
46+
--secondary: oklch(0.269 0 0);
47+
--secondary-foreground: oklch(0.985 0 0);
48+
--muted: oklch(0.269 0 0);
49+
--muted-foreground: oklch(0.708 0 0);
50+
--accent: oklch(0.269 0 0);
51+
--accent-foreground: oklch(0.985 0 0);
52+
--destructive: oklch(0.396 0.141 25.723);
53+
--destructive-foreground: oklch(0.637 0.237 25.331);
54+
--border: oklch(0.269 0 0);
55+
--input: oklch(0.269 0 0);
56+
--ring: oklch(0.439 0 0);
57+
--sidebar: oklch(0.205 0 0);
58+
--sidebar-foreground: oklch(0.985 0 0);
59+
--sidebar-primary: oklch(0.488 0.243 264.376);
60+
--sidebar-primary-foreground: oklch(0.985 0 0);
61+
--sidebar-accent: oklch(0.269 0 0);
62+
--sidebar-accent-foreground: oklch(0.985 0 0);
63+
--sidebar-border: oklch(0.269 0 0);
64+
--sidebar-ring: oklch(0.439 0 0);
65+
}
66+
67+
@theme inline {
68+
--font-sans: 'Geist', 'Geist Fallback';
69+
--font-mono: 'Geist Mono', 'Geist Mono Fallback';
70+
--color-background: var(--background);
71+
--color-foreground: var(--foreground);
72+
--color-card: var(--card);
73+
--color-card-foreground: var(--card-foreground);
74+
--color-popover: var(--popover);
75+
--color-popover-foreground: var(--popover-foreground);
76+
--color-primary: var(--primary);
77+
--color-primary-foreground: var(--primary-foreground);
78+
--color-secondary: var(--secondary);
79+
--color-secondary-foreground: var(--secondary-foreground);
80+
--color-muted: var(--muted);
81+
--color-muted-foreground: var(--muted-foreground);
82+
--color-accent: var(--accent);
83+
--color-accent-foreground: var(--accent-foreground);
84+
--color-destructive: var(--destructive);
85+
--color-destructive-foreground: var(--destructive-foreground);
86+
--color-border: var(--border);
87+
--color-input: var(--input);
88+
--color-ring: var(--ring);
89+
--radius-sm: calc(var(--radius) - 4px);
90+
--radius-md: calc(var(--radius) - 2px);
91+
--radius-lg: var(--radius);
92+
--radius-xl: calc(var(--radius) + 4px);
93+
--color-sidebar: var(--sidebar);
94+
--color-sidebar-foreground: var(--sidebar-foreground);
95+
--color-sidebar-primary: var(--sidebar-primary);
96+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
97+
--color-sidebar-accent: var(--sidebar-accent);
98+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
99+
--color-sidebar-border: var(--sidebar-border);
100+
--color-sidebar-ring: var(--sidebar-ring);
101+
}
102+
103+
@layer base {
104+
* {
105+
@apply border-border outline-ring/50;
106+
}
107+
body {
108+
@apply bg-background text-foreground;
109+
}
110+
}

‎apps/bundle-analyzer/app/layout.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import type { Metadata } from 'next'
2+
import { Geist, Geist_Mono } from 'next/font/google'
3+
import type React from 'react'
4+
import './globals.css'
5+
6+
// These get used as font-sans and font-mono
7+
const _geist = Geist({ subsets: ['latin'] })
8+
const _geistMono = Geist_Mono({ subsets: ['latin'] })
9+
10+
export const metadata: Metadata = {
11+
title: 'Next.js Bundle Analyzer',
12+
description:
13+
'Visualize and analyze your Next.js bundle sizes with interactive treemap and dependency analysis',
14+
}
15+
16+
export default function RootLayout({
17+
children,
18+
}: Readonly<{
19+
children: React.ReactNode
20+
}>) {
21+
return (
22+
<html
23+
lang="en"
24+
// Suppress hydration warnings here specifically because we'll modify the
25+
// classname for the theme before React hydates. This is to prevent a flash
26+
// of incorrect theme.
27+
suppressHydrationWarning
28+
>
29+
<head>
30+
<script
31+
// biome-ignore lint/security/noDangerouslySetInnerHtml: Needed to prevent flash of incorrect theme
32+
dangerouslySetInnerHTML={{
33+
__html: `
34+
(function() {
35+
const theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
36+
document.documentElement.classList.toggle('dark', theme === 'dark');
37+
38+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
39+
document.documentElement.classList.toggle('dark', e.matches);
40+
});
41+
})();
42+
`,
43+
}}
44+
/>
45+
</head>
46+
<body className="font-sans antialiased">{children}</body>
47+
</html>
48+
)
49+
}

0 commit comments

Comments
 (0)