用途:优化 Grafana 应用插件(type 为 app)的打包体积。module.js 是每个应用插件的渲染阻塞入口,越小对 Grafana 启动时间影响越小;良好分割后 module.js 应低于约 200 KB,只含懒加载包装器,功能代码按需加载。目标总 JS chunk 数约 15–25 个。
主要能力:按风险从低到高分步实施——module.tsx 懒加载包装(优先级 1,影响最大)、路由级 lazy()(优先级 2)、扩展组件 lazy()(优先级 3)、组件注册表与标签面板(优先级 4,中等风险)。不要改动 vendor 库(@grafana/scenes、@reduxjs/toolkit)和跨文件共享的工具组件。
使用方式:先加 bundle size CI 报告(grafana/plugin-actions/bundle-size),再确认插件上下文并测量生产构建基线;检查并更新 @grafana/create-plugin;分析代码找出可分割点;按优先级实现分割;chunk 过多时用 webpackChunkName 合并;最后测量验证并在运行中的 Grafana 实例逐路由测试。React.lazy 需要默认导出,命名导出可用 .then() 重映射;props 用 import type 避免被 webpack 追踪进主包。
适用场景:Grafana 应用插件体积优化,尤其是 module.js 达 1–3 MB 且无其他 JS chunk 的插件。
限制:仅适用于 app 类型插件,datasource/panel 插件需求不同;组件注册表等分割需确认 Suspense 位置;共享工具组件与 vendor 库不应手动处理;资料未提供具体收费、价格或平台信息。