skills.rest
1k-off
1k-offCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

plugin-bundle-size

Reduce Grafana app plugin bundle size by lazy-loading module.js with React.lazy and Suspense.

1|Updated May 21, 2026
Search Tags:#suspense#performance optimization#webpack#code splitting#grafana#plugin bundling#react lazy
One-click install
npx skills add https://github.com/1k-off/umbraco-observability-playground --skill plugin-bundle-size-1k-off
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: plugin-bundle-size
Source: https://github.com/1k-off/umbraco-observability-playground/tree/main/.agents/skills/plugin-bundle-size
Command: npx skills add https://github.com/1k-off/umbraco-observability-playground --skill plugin-bundle-size-1k-off

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you reduce a Grafana app plugin’s render-blocking module.js size so the plugin loads faster and Grafana startup impact is minimized.

Core Features & Use Cases

  • Lazy-load the Grafana plugin entry point: Move feature code behind React.lazy()/Suspense so module.tsx becomes a thin wrapper rather than a feature bundle.
  • Split by navigation and extensions: Convert routes and extension components to lazy-loaded chunks to avoid downloading everything upfront.
  • Implement safer splitting priorities: Follow a risk-ordered approach (Priority 1–3 first; then higher-risk areas) to achieve big wins without breaking plugin behavior.
  • Validate with measurable targets: Use build outputs to keep module.js typically under ~200 KB and target roughly 15–25 total JS chunks.
  • Handle plugin types consistently: Includes the datasource-editor variant for setConfigEditor, setQueryEditor, and variable/annotation editor support.
  • Troubleshoot split regressions: Covers common failures such as missing Suspense boundaries, default-export mismatches, or “module.js barely shrank” causes.

Quick Start

Ask the AI: "Reduce my Grafana app plugin bundle size by rewriting src/module.ts to src/module.tsx and lazy-loading routes and extension components while keeping Suspense boundaries correct."

Frequently Asked Questions about plugin-bundle-size

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I reduce my Grafana app plugin bundle size?▼

Reduce Grafana plugin bundle size by rewriting the render-blocking module.js entry point into a thin wrapper using React.lazy, Suspense, and dynamic imports to lazy-load feature code, minimizing startup impact and improving initial load performance.

Why does my Grafana plugin module.js barely shrink after code splitting?▼

Your module.js barely shrinks after code splitting when default-export mismatches occur, Suspense boundaries are missing, or feature code remains statically imported instead of being lazy-loaded through dynamic imports and React.lazy.

Can I use React.lazy and Suspense to split Grafana datasource editor plugins?▼

Yes, you can apply React.lazy and Suspense to split datasource editor plugins by lazy-loading setConfigEditor, setQueryEditor, and variable or annotation editor components to improve initial load performance and chunk composition.

What is a safe priority approach for splitting Grafana plugin routes and extensions?▼

A safe priority approach for splitting Grafana plugin routes and extensions involves implementing risk-ordered splitting, tackling Priority 1 through 3 areas first to achieve large bundle reductions before moving to higher-risk areas, preserving correct default exports and Suspense boundaries.

What target size should a production Grafana plugin module.js be after optimization?▼

Target a production Grafana plugin module.js size typically under 200 KB with roughly 15 to 25 total JavaScript chunks, using build outputs to validate that route and extension splitting successfully reduced render-blocking code.

Related Skills

Explore More Software Engineering Skills→
grafanagrafana
213

plugin-bundle-size

Convert Grafana plugin eager imports into lazy-loaded chunks with CI reporting.

Official
Advanced
DatTran26DatTran26

ck:frontend-development

Standardizes modern React/TypeScript frontend development with TanStack Router and MUI v7 styling.

Community
Advanced
diendhdiendh

webpack-expert

Identify and resolve Webpack 5 configuration inefficiencies in multi-entry and module federation builds.

Community
Advanced
PatternsDevPatternsDev
235

dynamic-import

Dynamically load React components with React.lazy and Suspense.

Official
Intermediate