plugin-bundle-size

What problem does it solve?

Grafana app plugins often ship a large, render-blocking module.js that slows Grafana startup and increases perceived latency for users. This Skill provides a step-by-step approach to identify eager imports, convert the entry point to a lazy-loaded root, and apply route- and extension-level code splitting so feature code loads on demand.

Core Features & Use Cases

• Entry-point refactor: Rename module.ts to module.tsx and ensure the entry imports only lightweight wrappers while feature code is loaded with React.lazy and Suspense.
• Route and extension splitting: Convert route components and plugin extensions to lazy-loaded chunks to reduce the initial payload and defer heavy code until needed.
• CI and measurement: Add bundle-size CI reporting to capture PR diffs, measure module.js and chunk counts, and verify targets (module.js < ~200 KB; 15–25 chunks).
• Troubleshooting and safety: Guidance on extracting singletons (e.g., Faro), grouping chunks with webpack magic comments, and common fixes for Suspense boundaries and chunk loading issues.

Quick Start

Diagnose and reduce your plugin's module.js by converting the entry to module.tsx, wrapping routes and extensions with React.lazy and Suspense, and running a production build to verify module.js and chunk counts.