plugin-bundle-size

Reduce Grafana plugin bundle size by converting eager entry imports into lazy-loaded chunks and applying route-level code splitting. This defers heavy feature code so the plugin loads on demand instead of blocking startup.

Split a large Grafana module.js by renaming module.ts to module.tsx and wrapping route components and plugin extensions with React.lazy and Suspense. This breaks the render-blocking entry point into smaller, on-demand chunks.

React.lazy code splitting for Grafana plugins works by ensuring the entry point imports only lightweight wrappers while feature code is loaded dynamically. Target a production module.js under 200 KB and 15–25 JS chunks.

You can track Grafana plugin bundle size in CI by integrating bundle-size reporting to capture PR diffs, measure module.js size and chunk counts, and verify targets like module.js under 200 KB.

Code splitting applies to both Grafana app and datasource plugins, including monorepos and subdirectory plugin layouts. It handles these layouts by extracting initializers to preserve singletons like Faro across lazy boundaries.

Chunk loading errors in Grafana plugins after adding Suspense often stem from missing boundaries or ungrouped chunks. Fix them by ensuring proper Suspense boundaries and using webpack magic comments to group chunks logically.