feat(gdu): add bundle analyser for Vite builds (#415)

* feat(gdu): add bundle analyser support for Vite builds

Enable the existing `gdu build -a` / `ANALYZE=true` flag for Vite builds
using rollup-plugin-visualizer. Generates an interactive treemap report at
`bundle-report.html` in the output directory, matching the webpack behaviour.

The plugin is dynamically imported with a try/catch fallback (consistent with
vanilla-extract pattern) so consumers need rollup-plugin-visualizer installed.

AG-17604

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* chore: Removes treat

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: amir-zahedi

.changeset/vite-bundle-analyser.md

@@ -0,0 +1,5 @@
+---
+"gdu": minor
+---
+
+Add bundle analyser support for Vite builds via `gdu build -a` flag

packages/gdu/commands/build/buildSPA-vite.ts

@@ -96,6 +96,31 @@ export const buildSPAVite = async (guruConfig: GuruConfig) => {
 		}),
 	);
 
+	if (process.env.ANALYZE === 'true') {
+		try {
+			const { visualizer } = await dynamicImport(
+				'rollup-plugin-visualizer',
+			);
+			runtimePlugins.push(
+				visualizer({
+					filename: join(guruConfig.outputPath, 'bundle-report.html'),
+					open: false,
+					gzipSize: true,
+					brotliSize: true,
+					template: 'treemap',
+				}),
+			);
+		} catch {
+			console.warn(
+				magenta(
+					'Warning: rollup-plugin-visualizer is not installed. ' +
+						'Install it to enable bundle analysis for Vite builds: ' +
+						'yarn add -D rollup-plugin-visualizer',
+				),
+			);
+		}
+	}
+
 	const { build } = (await dynamicImport('vite')) as {
 		build: (config: InlineConfig) => Promise<unknown>;
 	};

packages/gdu/config/webpack/webpack.config.ts

@@ -8,7 +8,6 @@ import envCI from 'env-ci';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { MinifyOptions } from 'terser';
 import TerserPlugin, { MinimizerOptions } from 'terser-webpack-plugin';
-import { TreatPlugin } from 'treat/webpack-plugin';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 import {
 	Configuration,
@@ -23,7 +22,6 @@ import {
 	getProjectFolderName,
 	getProjectName,
 } from '../../lib/config';
-import { isProductionBuild } from '../../lib/misc';
 import {
 	CALLING_WORKSPACE_ROOT,
 	GDU_ROOT,
@@ -388,17 +386,6 @@ export const baseOptions = ({
 					branch,
 				}),
 			}),
-			new TreatPlugin({
-				outputLoaders: [
-					{
-						loader: isProductionBuild()
-							? MiniCssExtractPlugin.loader
-							: require.resolve('style-loader'),
-					},
-				],
-				minify: true,
-				browsers,
-			}),
 			new VanillaExtractPlugin(),
 			new MiniCssExtractPlugin({
 				filename: `${fileMask}.css`,

packages/gdu/config/webpack/webpack.development.config.ts

@@ -5,7 +5,6 @@ import browsers from 'browserslist-config-autoguru';
 import Dotenv from 'dotenv-webpack';
 import envCI from 'env-ci';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import { TreatPlugin } from 'treat/webpack-plugin';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 import {
 	Configuration,
@@ -354,15 +353,6 @@ export const baseDevelopmentOptions = ({
 					branch,
 				}),
 			}),
-			new TreatPlugin({
-				outputLoaders: [
-					{
-						loader: require.resolve('style-loader'),
-					},
-				],
-				minify: false,
-				browsers,
-			}),
 			new VanillaExtractPlugin(),
 			new MiniCssExtractPlugin({
 				filename: `${fileMask}.css`,

packages/gdu/config/webpack/webpack.webcomponents.config.ts

@@ -8,7 +8,6 @@ import envCI from 'env-ci';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { MinifyOptions } from 'terser';
 import TerserPlugin, { MinimizerOptions } from 'terser-webpack-plugin';
-import { TreatPlugin } from 'treat/webpack-plugin';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 import {
 	Configuration,
@@ -18,7 +17,6 @@ import {
 } from 'webpack';
 
 import { getGuruConfig, getProjectName } from '../../lib/config';
-import { isProductionBuild } from '../../lib/misc';
 import { CALLING_WORKSPACE_ROOT, PROJECT_ROOT } from '../../lib/roots';
 import { getHooks } from '../../utils/hooks';
 
@@ -305,17 +303,6 @@ export const makeWebComponentsWebpackConfig = (
 					branch,
 				}),
 			}),
-			new TreatPlugin({
-				outputLoaders: [
-					{
-						loader: isProductionBuild()
-							? MiniCssExtractPlugin.loader
-							: require.resolve('style-loader'),
-					},
-				],
-				minify: !isDev,
-				browsers,
-			}),
 			new VanillaExtractPlugin(),
 			new MiniCssExtractPlugin({
 				filename: `${fileMask}.css`,

packages/gdu/package.json

@@ -83,7 +83,6 @@
 		"sade": "^1.7.4",
 		"tapable": "^2.2.0",
 		"terser-webpack-plugin": "^5.3.11",
-		"treat": "2.0.4",
 		"ts-dedent": "^2.2.0",
 		"tsconfig-paths-webpack-plugin": "^3.5.2",
 		"url-loader": "^4.1.1",