Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
amir-zahedi merged 2 commits into from
Feb 26, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
535495e
feat(gdu): add bundle analyser support for Vite builds
amir-zahedi Feb 26, 2026
6769b55
chore: Removes treat
amir-zahedi Feb 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/vite-bundle-analyser.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"gdu": minor
---

Add bundle analyser support for Vite builds via `gdu build -a` flag
25 changes: 25 additions & 0 deletions packages/gdu/commands/build/buildSPA-vite.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
}),
);
Comment on lines +99 to +112
Copy link

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In production multi-env builds, Vite’s outDir is computed per config (e.g. ${guruConfig.outputPath}/${buildEnv}), but the visualizer report is always written to join(guruConfig.outputPath, 'bundle-report.html'). Since buildSPAVite loops over multiple configs, this will overwrite the same report file and place it outside the per-env output directory. Consider constructing the report filename from the current config’s build.outDir (or otherwise making it env-specific) and adding the visualizer plugin per-config inside the loop.

Copilot uses AI. Check for mistakes.
} 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',
),
);
Comment on lines +113 to +120
Copy link

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The catch here will also handle cases where rollup-plugin-visualizer is installed but fails to load/execute for another reason (e.g. incompatible version, runtime error), yet the warning message specifically claims it is "not installed". Capture the error and either (a) tailor the message based on a module-not-found check, or (b) include the error details in the warning so failures aren’t misdiagnosed.

Suggested change
} 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',
),
);
} catch (error) {
const err = error as { code?: unknown; message?: unknown };
const errorCode = typeof err.code === 'string' ? err.code : undefined;
const isModuleNotFound =
errorCode === 'MODULE_NOT_FOUND' ||
errorCode === 'ERR_MODULE_NOT_FOUND';
if (isModuleNotFound) {
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',
),
);
} else {
const errorMessage =
typeof err.message === 'string'
? err.message
: String(error);
console.warn(
magenta(
'Warning: Failed to load rollup-plugin-visualizer for bundle analysis. ' +
`Error: ${errorMessage}`,
),
);
}

Copilot uses AI. Check for mistakes.
}
}

const { build } = (await dynamicImport('vite')) as {
build: (config: InlineConfig) => Promise<unknown>;
};
Expand Down
13 changes: 0 additions & 13 deletions packages/gdu/config/webpack/webpack.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -23,7 +22,6 @@ import {
getProjectFolderName,
getProjectName,
} from '../../lib/config';
import { isProductionBuild } from '../../lib/misc';
import {
CALLING_WORKSPACE_ROOT,
GDU_ROOT,
Expand Down Expand Up @@ -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`,
Expand Down
10 changes: 0 additions & 10 deletions packages/gdu/config/webpack/webpack.development.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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`,
Expand Down
13 changes: 0 additions & 13 deletions packages/gdu/config/webpack/webpack.webcomponents.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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';

Expand Down Expand Up @@ -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`,
Expand Down
1 change: 0 additions & 1 deletion packages/gdu/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading
Loading