plugin-bundle-size

SKILL.md

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.

Risk levels

Not all splitting opportunities carry the same risk. Apply them in this order:

Level
What
Risk
Impact

Safe
module.tsx lazy wrappers (Priority 1)
Very low — no behaviour change
Highest — module.js drops 90%+

Safe
Route-level lazy() (Priority 2)
Low — each route is self-contained
High — one chunk per route

Safe
Extension lazy() (Priority 3)
Low — extensions are isolated
Medium — independent chunk per extension

Moderate
Component registries / tab panels (Priority 4)
Medium — verify Suspense placement
Medium — splits heavy pages further

Do not touch
Vendor libraries (@grafana/scenes, @reduxjs/toolkit)
N/A
N/A — webpack splits these automatically

Do not touch
Shared utility components (Markdown, Spinner) used across many files
High churn, many callsites
Low — already in shared vendor chunks