Plugin Bundle Size

This walks you through systematically shrinking a Grafana app plugin's module.js from multi-megabyte bloat down to under 200 KB using React.lazy, Suspense, and webpack code splitting. The breakdown is unusually pragmatic: it gives you a risk matrix showing exactly what to split (routes, extensions) and what to leave alone (vendor libs, shared utils), plus a CI action that posts bundle diffs on every PR so you can see the impact immediately. The step-by-step goes from measurement to analysis to implementation in priority order, with real shell commands to measure production bundle size and grep for heavy imports. If your Grafana plugin is slow to load or you're staring at a 2 MB module.js, this is the playbook.

skills.sh installs: 4.5K
GitHub stars: 307
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add grafana/skills --skill plugin-bundle-size --agent claude-code

Installs into .claude/skills of the current project.

Files

Grafana plugin bundle size optimisation

module.js is the render-blocking entry point for every Grafana app plugin. The smaller it is, the less impact the plugin has on Grafana's overall startup time. A well-split plugin should have a module.js under ~200 KB that contains nothing but lazy-loaded wrappers — all feature code loads on demand.

Target: ~15–25 JS chunks total. Fewer means too little splitting; far more (50+) means over-engineering.