feat(gdu): add bundle analyser for Vite builds#415
Conversation
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>
There was a problem hiding this comment.
Pull request overview
Adds an optional bundle analysis report for Vite-based SPA builds in gdu, gated behind the existing ANALYZE=true / gdu build -a flag, aiming to match the current webpack bundle-report.html behavior.
Changes:
- Conditionally adds
rollup-plugin-visualizerto Vite build plugins whenprocess.env.ANALYZE === 'true'. - Writes a
bundle-report.htmlreport file and warns (without crashing) if the visualizer dependency is missing. - Adds a changeset to publish the feature as a minor bump for
gdu.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/gdu/commands/build/buildSPA-vite.ts | Adds conditional runtime plugin injection for rollup-plugin-visualizer during Vite builds. |
| .changeset/vite-bundle-analyser.md | Declares a minor version bump for gdu documenting the new analyze behavior for Vite builds. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| 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', | ||
| }), | ||
| ); |
There was a problem hiding this comment.
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.
| } 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', | ||
| ), | ||
| ); |
There was a problem hiding this comment.
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.
| } 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}`, | |
| ), | |
| ); | |
| } |
Summary
rollup-plugin-visualizersupport for Vite builds whenANALYZE=true/gdu build -abundle-report.html(interactive treemap) to the build output directory, matching existing webpack behaviourrollup-plugin-visualizerinstalledTest plan
yarn workspace gdu buildexits 0ANALYZE=true APP_ENV=prod gdu buildon a Vite MFE (fmo-booking) generatesbundle-report.html(2.5 MB interactive treemap)rollup-plugin-visualizerlogs a warning instead of crashingAG-17604