Improve bundle analyzer: count sync deps, add treemap visualization

- Sum entry chunk + all chunks reachable via static imports (so the reported size reflects true up-front cost; lazy chunks excluded)
- Add `--visualize` flag (and `bundle:visualize` script) that emits an interactive treemap HTML per scenario via `rollup-plugin-visualizer`
- Regenerate `latest.json` baseline with the new methodology

Author: techniq

bundle-analyzer/.gitignore

@@ -1,2 +1,3 @@
 .temp-bundle-analysis/
 bundle-reports/bundle-report-*.json
+bundle-reports/visualize-*.html

bundle-analyzer/README.md

@@ -65,6 +65,11 @@ pnpm bundle:analyze -- --components
 # Analyze specific scenarios or components by name
 pnpm bundle:analyze -- geo dagre
 
+# Generate interactive treemap HTML for the given scenarios
+pnpm bundle:visualize -- core geo
+# → bundle-reports/visualize-core.html, bundle-reports/visualize-geo.html
+# Open in a browser to drill into per-module sizes (rendered/gzipped/brotli)
+
 # Compare two report files
 pnpm bundle:compare -- report-new.json report-old.json
 ```

bundle-analyzer/bundle-analyzer.ts

@@ -1,5 +1,6 @@
 import { build } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { visualizer } from "rollup-plugin-visualizer";
 import { resolve, join } from "node:path";
 import {
 	writeFileSync,
@@ -47,6 +48,7 @@ class BundleAnalyzer {
 		scenarios?: string[];
 		components?: boolean;
 		componentFilter?: string[];
+		visualize?: boolean;
 	}): Promise<BundleReport> {
 		console.log("Starting bundle analysis...\n");
 
@@ -70,7 +72,7 @@ class BundleAnalyzer {
 
 		for (const scenario of scenariosToAnalyze) {
 			console.log(`  Analyzing: ${scenario.name}`);
-			const result = await this.analyzeScenario(scenario);
+			const result = await this.analyzeScenario(scenario, options.visualize);
 			results.push(result);
 		}
 
@@ -82,6 +84,16 @@ class BundleAnalyzer {
 		this.saveReport(report);
 		this.printReport(report);
 
+		if (options.visualize) {
+			console.log("\nTreemap visualizations:");
+			for (const scenario of scenariosToAnalyze) {
+				const safeName = scenario.name.replace(/[^a-zA-Z0-9_-]/g, "_");
+				console.log(
+					`  ${join(this.outputDir, `visualize-${safeName}.html`)}`
+				);
+			}
+		}
+
 		// Clean up temp directory
 		if (existsSync(this.tempDir)) {
 			rmSync(this.tempDir, { recursive: true });
@@ -102,12 +114,14 @@ class BundleAnalyzer {
 	}
 
 	private async analyzeScenario(
-		scenario: Scenario
+		scenario: Scenario,
+		visualize = false
 	): Promise<BundleResult> {
 		const entryPath = this.createEntryFile(scenario);
 		const { size, gzipSize } = await this.buildAndMeasure(
 			entryPath,
-			scenario.name
+			scenario.name,
+			visualize
 		);
 
 		return {
@@ -153,15 +167,31 @@ const refs = [
 
 	private async buildAndMeasure(
 		entryPath: string,
-		scenarioName: string
+		scenarioName: string,
+		visualize = false
 	): Promise<{ size: number; gzipSize: number }> {
 		const safeName = scenarioName.replace(/[^a-zA-Z0-9_-]/g, "_");
 		const outputPath = join(this.tempDir, `dist-${safeName}`);
+		const visualizePath = join(
+			this.outputDir,
+			`visualize-${safeName}.html`
+		);
 
 		try {
 			await build({
 				plugins: [
 					svelte(),
+					...(visualize
+						? [
+								visualizer({
+									filename: visualizePath,
+									template: "treemap",
+									gzipSize: true,
+									brotliSize: true,
+									title: `Bundle: ${scenarioName}`,
+								}),
+							]
+						: []),
 					{
 						name: "strip-comments",
 						generateBundle(_options, bundle) {
@@ -231,15 +261,43 @@ const refs = [
 	private measureBundle(
 		safeName: string
 	): { size: number; gzipSize: number } {
-		const bundlePath = join(this.tempDir, `dist-${safeName}`, "bundle.js");
+		const distDir = join(this.tempDir, `dist-${safeName}`);
+		const entryPath = join(distDir, "bundle.js");
 
-		if (!existsSync(bundlePath)) {
+		if (!existsSync(entryPath)) {
 			return { size: 0, gzipSize: 0 };
 		}
 
-		const content = readFileSync(bundlePath, "utf-8");
-		const size = Buffer.byteLength(content, "utf-8");
-		const gzipSize = gzipSync(content).length;
+		// Sum the entry chunk + all chunks reachable via STATIC imports.
+		// Lazy-loaded chunks (via dynamic `import()`) are excluded so the
+		// reported size reflects what every consumer of this scenario pays
+		// up-front, not optional features they may not use.
+		const visited = new Set<string>();
+		const stack = ["bundle.js"];
+		let totalContent = "";
+
+		while (stack.length > 0) {
+			const file = stack.pop()!;
+			if (visited.has(file)) continue;
+			visited.add(file);
+
+			const filePath = join(distDir, file);
+			if (!existsSync(filePath)) continue;
+
+			const content = readFileSync(filePath, "utf-8");
+			totalContent += content;
+
+			// Match top-of-file static imports: `import ... from "./XXX.js"`
+			// (Dynamic `import("./XXX.js")` calls have a paren — different pattern.)
+			const staticImportRegex =
+				/(?:^|[\n;])\s*import\s+(?:[\s\S]*?\s+from\s+)?["']\.\/([\w-]+\.js)["']/g;
+			for (const match of content.matchAll(staticImportRegex)) {
+				stack.push(match[1]!);
+			}
+		}
+
+		const size = Buffer.byteLength(totalContent, "utf-8");
+		const gzipSize = gzipSync(totalContent).length;
 
 		return { size, gzipSize };
 	}
@@ -365,6 +423,7 @@ async function main() {
 	}
 
 	const includeComponents = args.includes("--components");
+	const visualize = args.includes("--visualize");
 	const scenarioFilter = args
 		.filter((a) => !a.startsWith("--"))
 		.filter((a) => a.length > 0);
@@ -375,6 +434,7 @@ async function main() {
 		components: includeComponents,
 		componentFilter:
 			scenarioFilter.length > 0 ? scenarioFilter : undefined,
+		visualize,
 	});
 }
 

bundle-analyzer/bundle-reports/latest.json

@@ -1,11 +1,11 @@
 {
-  "timestamp": "2026-04-26T13:08:23.594Z",
+  "timestamp": "2026-04-26T17:17:31.860Z",
   "results": [
     {
       "scenario": "core",
       "description": "Bare minimum: Chart context + Svg layer",
-      "size": 672241,
-      "gzipSize": 164100,
+      "size": 653750,
+      "gzipSize": 158781,
       "imports": [
         "Chart",
         "Svg"
@@ -14,8 +14,8 @@
     {
       "scenario": "line-chart",
       "description": "Basic line chart with axes and grid",
-      "size": 672265,
-      "gzipSize": 164118,
+      "size": 653774,
+      "gzipSize": 158804,
       "imports": [
         "Chart",
         "Svg",
@@ -27,8 +27,8 @@
     {
       "scenario": "line-chart-interactive",
       "description": "Line chart with tooltip and highlight",
-      "size": 672642,
-      "gzipSize": 164281,
+      "size": 654151,
+      "gzipSize": 158950,
       "imports": [
         "Chart",
         "Svg",
@@ -42,8 +42,8 @@
     {
       "scenario": "area-chart",
       "description": "Area chart with axes",
-      "size": 679562,
-      "gzipSize": 165605,
+      "size": 661071,
+      "gzipSize": 160338,
       "imports": [
         "Chart",
         "Svg",
@@ -55,8 +55,8 @@
     {
       "scenario": "bar-chart",
       "description": "Bar chart with axes",
-      "size": 674531,
-      "gzipSize": 164511,
+      "size": 656040,
+      "gzipSize": 159194,
       "imports": [
         "Chart",
         "Svg",
@@ -68,8 +68,8 @@
     {
       "scenario": "scatter-chart",
       "description": "Scatter plot with points",
-      "size": 672553,
-      "gzipSize": 164187,
+      "size": 654062,
+      "gzipSize": 158863,
       "imports": [
         "Chart",
         "Svg",
@@ -82,8 +82,8 @@
     {
       "scenario": "pie-chart",
       "description": "Pie/donut chart with arcs",
-      "size": 679190,
-      "gzipSize": 165795,
+      "size": 660696,
+      "gzipSize": 160487,
       "imports": [
         "Chart",
         "Svg",
@@ -95,8 +95,8 @@
     {
       "scenario": "high-level-charts",
       "description": "All high-level chart components (LineChart, BarChart, etc.)",
-      "size": 729852,
-      "gzipSize": 174510,
+      "size": 711365,
+      "gzipSize": 169194,
       "imports": [
         "LineChart",
         "AreaChart",
@@ -109,8 +109,8 @@
     {
       "scenario": "geo",
       "description": "Geographic map with paths",
-      "size": 675634,
-      "gzipSize": 164598,
+      "size": 657146,
+      "gzipSize": 159299,
       "imports": [
         "Chart",
         "Svg",
@@ -122,8 +122,8 @@
     {
       "scenario": "geo-tiles",
       "description": "Geographic map with tile layer",
-      "size": 680081,
-      "gzipSize": 166170,
+      "size": 661587,
+      "gzipSize": 160892,
       "imports": [
         "Chart",
         "Svg",
@@ -136,8 +136,8 @@
     {
       "scenario": "geo-full",
       "description": "Full geo setup with all geo components",
-      "size": 704046,
-      "gzipSize": 172034,
+      "size": 685563,
+      "gzipSize": 166781,
       "imports": [
         "Chart",
         "Svg",
@@ -158,8 +158,8 @@
     {
       "scenario": "force",
       "description": "Force-directed graph layout",
-      "size": 675264,
-      "gzipSize": 164971,
+      "size": 663068,
+      "gzipSize": 161928,
       "imports": [
         "Chart",
         "Svg",
@@ -172,8 +172,8 @@
     {
       "scenario": "hierarchy-tree",
       "description": "Tree layout with links",
-      "size": 679115,
-      "gzipSize": 166333,
+      "size": 660624,
+      "gzipSize": 161042,
       "imports": [
         "Chart",
         "Svg",
@@ -186,8 +186,8 @@
     {
       "scenario": "hierarchy-treemap",
       "description": "Treemap layout",
-      "size": 678677,
-      "gzipSize": 166140,
+      "size": 660183,
+      "gzipSize": 160848,
       "imports": [
         "Chart",
         "Svg",
@@ -200,8 +200,8 @@
     {
       "scenario": "hierarchy-pack",
       "description": "Circle packing layout",
-      "size": 678485,
-      "gzipSize": 166229,
+      "size": 659994,
+      "gzipSize": 160950,
       "imports": [
         "Chart",
         "Svg",
@@ -213,8 +213,8 @@
     {
       "scenario": "dagre",
       "description": "Dagre directed graph layout",
-      "size": 738780,
-      "gzipSize": 182465,
+      "size": 720313,
+      "gzipSize": 177133,
       "imports": [
         "Chart",
         "Svg",
@@ -227,8 +227,8 @@
     {
       "scenario": "sankey",
       "description": "Sankey flow diagram",
-      "size": 681188,
-      "gzipSize": 166502,
+      "size": 662707,
+      "gzipSize": 161204,
       "imports": [
         "Chart",
         "Svg",
@@ -241,8 +241,8 @@
     {
       "scenario": "chord",
       "description": "Chord diagram",
-      "size": 681168,
-      "gzipSize": 166294,
+      "size": 662677,
+      "gzipSize": 161036,
       "imports": [
         "Chart",
         "Svg",
@@ -253,8 +253,8 @@
     {
       "scenario": "canvas",
       "description": "Canvas-based rendering",
-      "size": 672241,
-      "gzipSize": 164104,
+      "size": 653750,
+      "gzipSize": 158785,
       "imports": [
         "Chart",
         "Canvas"
@@ -263,8 +263,8 @@
     {
       "scenario": "all",
       "description": "Everything from layerchart (worst case)",
-      "size": 1023672,
-      "gzipSize": 249263,
+      "size": 1011500,
+      "gzipSize": 246119,
       "imports": [
         "*"
       ]