chore: fast playground build feat. claude (#17808)

The plugin we used to analyze bundle sizes was unnecessarily slow. After
isolating the problem, tasked Claude with building a lightweight plugin
that just reads the build output and enforcers the limits based on
regexp. Works like a charm.

Build went from ~180s to 35.

Author: AztecBot

playground/package.json

@@ -58,7 +58,6 @@
     "typescript": "~5.7.3",
     "typescript-eslint": "^8.11.0",
     "vite": "^7.1.4",
-    "vite-plugin-bundlesize": "^0.3.0",
     "vite-plugin-node-polyfills": "^0.24.0",
     "vite-plugin-static-copy": "^3.1.2"
   }

playground/vite.config.ts

@@ -1,7 +1,8 @@
-import { defineConfig, loadEnv, searchForWorkspaceRoot } from 'vite';
+import { defineConfig, loadEnv, searchForWorkspaceRoot, Plugin, ResolvedConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import { PolyfillOptions, nodePolyfills } from 'vite-plugin-node-polyfills';
-import bundlesize from 'vite-plugin-bundlesize';
+import fs from 'fs';
+import path from 'path';
 
 // Only required for alternative bb wasm file, left as reference
 //import { viteStaticCopy } from 'vite-plugin-static-copy';
@@ -21,6 +22,79 @@ const nodePolyfillsFix = (options?: PolyfillOptions | undefined): Plugin => {
   };
 };
 
+/**
+ * Lightweight chunk size validator plugin
+ * Checks chunk sizes after build completes and fails if limits are exceeded
+ */
+interface ChunkSizeLimit {
+  /** Pattern to match chunk file names (e.g., /assets\/index-.*\.js$/) */
+  pattern: RegExp;
+  /** Maximum size in kilobytes */
+  maxSizeKB: number;
+  /** Optional description for logging */
+  description?: string;
+}
+
+const chunkSizeValidator = (limits: ChunkSizeLimit[]): Plugin => {
+  let config: ResolvedConfig;
+
+  return {
+    name: 'chunk-size-validator',
+    enforce: 'post',
+    apply: 'build',
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+    },
+    closeBundle() {
+      const outDir = this.meta?.watchMode ? null : 'dist';
+      if (!outDir) return; // Skip in watch mode
+
+      const logger = config.logger;
+      const violations: string[] = [];
+      const checkDir = (dir: string, baseDir: string = '') => {
+        const files = fs.readdirSync(dir);
+
+        for (const file of files) {
+          const filePath = path.join(dir, file);
+          const relativePath = path.join(baseDir, file);
+          const stat = fs.statSync(filePath);
+
+          if (stat.isDirectory()) {
+            checkDir(filePath, relativePath);
+          } else if (stat.isFile()) {
+            const sizeKB = stat.size / 1024;
+
+            for (const limit of limits) {
+              if (limit.pattern.test(relativePath)) {
+                const desc = limit.description ? ` (${limit.description})` : '';
+                logger.info(`  ${relativePath}: ${sizeKB.toFixed(2)} KB / ${limit.maxSizeKB} KB${desc}`);
+
+                if (sizeKB > limit.maxSizeKB) {
+                  violations.push(
+                    `  ❌ ${relativePath}: ${sizeKB.toFixed(2)} KB exceeds limit of ${limit.maxSizeKB} KB${desc}`,
+                  );
+                }
+              }
+            }
+          }
+        }
+      };
+
+      logger.info('\n📦 Validating chunk sizes...');
+      checkDir(path.resolve(process.cwd(), outDir));
+
+      if (violations.length > 0) {
+        logger.error('\n❌ Chunk size validation failed:\n');
+        violations.forEach(v => logger.error(v));
+        logger.error('\n');
+        throw new Error('Build failed: chunk size limits exceeded');
+      } else {
+        logger.info('✅ All chunks within size limits\n');
+      }
+    },
+  };
+};
+
 // https://vite.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '');
@@ -47,7 +121,7 @@ export default defineConfig(({ mode }) => {
     },
     plugins: [
       react({ jsxImportSource: '@emotion/react' }),
-      nodePolyfillsFix({ include: ['buffer', 'path'] }),
+      nodePolyfillsFix({ include: ['buffer', 'path', 'process', 'net', 'tty'] }),
       // This is unnecessary unless BB_WASM_PATH is defined (default would be /assets/barretenberg.wasm.gz)
       // Left as an example of how to use a different bb wasm file than the default lazily loaded one
       // viteStaticCopy({
@@ -58,18 +132,21 @@ export default defineConfig(({ mode }) => {
       //     },
       //   ],
       // }),
-      bundlesize({
+      chunkSizeValidator([
         // Bump log:
         // - AD: bumped from 1600 => 1680 as we now have a 20kb msgpack lib in bb.js and other logic got us 50kb higher, adding some wiggle room.
         // - MW: bumped from 1700 => 1750 after adding the noble curves pkg to foundation required for blob batching calculations.
-        limits: [
-          // Main entrypoint, hard limit
-          { name: 'assets/index-*', limit: '1750kB' },
-          // This limit is to detect wheter our json artifacts or bb.js wasm get out of control. At the time
-          // of writing, all the .js files bundled in the app are below 4MB
-          { name: '**/*', limit: '4000kB' },
-        ],
-      }),
+        {
+          pattern: /assets\/index-.*\.js$/,
+          maxSizeKB: 1750,
+          description: 'Main entrypoint, hard limit',
+        },
+        {
+          pattern: /.*/,
+          maxSizeKB: 4000,
+          description: 'Detect if json artifacts or bb.js wasm get out of control',
+        },
+      ]),
     ],
     define: {
       'process.env': JSON.stringify({
@@ -81,9 +158,5 @@ export default defineConfig(({ mode }) => {
         BB_WASM_PATH: env.BB_WASM_PATH,
       }),
     },
-    build: {
-      // Required by vite-plugin-bundle-size
-      sourcemap: 'hidden',
-    },
   };
 });

playground/yarn.lock

@@ -102,7 +102,6 @@ __metadata:
     typescript: "npm:~5.7.3"
     typescript-eslint: "npm:^8.11.0"
     vite: "npm:^7.1.4"
-    vite-plugin-bundlesize: "npm:^0.3.0"
     vite-plugin-node-polyfills: "npm:^0.24.0"
     vite-plugin-static-copy: "npm:^3.1.2"
   languageName: unknown
@@ -5708,7 +5707,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-ansi@npm:^7.0.1, strip-ansi@npm:^7.1.0":
+"strip-ansi@npm:^7.0.1":
   version: 7.1.0
   resolution: "strip-ansi@npm:7.1.0"
   dependencies:
@@ -6045,21 +6044,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-bundlesize@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "vite-plugin-bundlesize@npm:0.3.0"
-  dependencies:
-    picomatch: "npm:^4.0.3"
-    strip-ansi: "npm:^7.1.0"
-    vlq: "npm:^2.0.4"
-  peerDependencies:
-    vite: ">= 6.0.0"
-  bin:
-    bundlesize: bin/cli.js
-  checksum: 10c0/2c81c710715c86cc6dc0ff71339ff1a0f233e0f6cada71849e2bd7c66cdb2caca0d393d6f67726496fd8aebf62681a41287de72223ce0b1e8061d2e53e6ef8da
-  languageName: node
-  linkType: hard
-
 "vite-plugin-node-polyfills@npm:^0.24.0":
   version: 0.24.0
   resolution: "vite-plugin-node-polyfills@npm:0.24.0"
@@ -6142,13 +6126,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vlq@npm:^2.0.4":
-  version: 2.0.4
-  resolution: "vlq@npm:2.0.4"
-  checksum: 10c0/7b4b14a724ad21a71a5ea8aabc08e7b766271cbf61b51b5a861c6f8c917446d7b10956ceaa95f6ce21cd80f12468875fc42287d3b7b1a40e627c116400ce663e
-  languageName: node
-  linkType: hard
-
 "vm-browserify@npm:^1.0.1":
   version: 1.1.2
   resolution: "vm-browserify@npm:1.1.2"