chore: configure rollup visualizer reports

.pages/size-reports/README.md

@@ -0,0 +1,5 @@
+# Bundle Size Reports
+
+This directory is the output target for the Rollup visualizer report generated during `pnpm build`. The report file is emitted as `index.html`, and it can be published from the `.pages` directory if you want to surface the bundle analysis (for example on GitHub Pages).
+
+Files in this directory are generated; regenerate them by re-running the production build.

package.json

@@ -88,6 +88,7 @@
     "nx": "catalog:",
     "postcss-html": "catalog:",
     "prettier": "catalog:",
+    "rollup-plugin-visualizer": "^5.12.0",
     "storybook": "catalog:",
     "stylelint": "catalog:",
     "tailwindcss": "catalog:",

vite.config.mts

@@ -9,6 +9,7 @@ import { defineConfig } from 'vite'
 import type { UserConfig } from 'vite'
 import { createHtmlPlugin } from 'vite-plugin-html'
 import vueDevTools from 'vite-plugin-vue-devtools'
+import { visualizer } from 'rollup-plugin-visualizer'
 
 import { comfyAPIPlugin, generateImportMapPlugin } from './build/plugins'
 
@@ -163,7 +164,19 @@ export default defineConfig({
       deep: true,
       extensions: ['vue'],
       directoryAsNamespace: true
-    })
+    }),
+
+    ...(IS_DEV
+      ? []
+      : [
+          visualizer({
+            filename: '.pages/size-reports/index.html',
+            template: 'treemap',
+            gzipSize: true,
+            brotliSize: true,
+            emitFile: false
+          })
+        ])
   ],
 
   build: {