Frontend: Code split the plugin for improved performance

[leeoniya]

Hello! 👋

Whilst auditing Grafana javascript payloads we've noticed that your Grafana app plugin is not taking advantage of code splitting. This is resulting it a large amount of Javascript being preloaded before the Grafana application can render anything. We're aware applications grow over time and generally we're not great at keeping on top of this but we would really appreciate it if you could put some time into code splitting this app plugin to help us reduce the amount of javascript code we're loading up front.

The following are worth considering when taking on this task:

1. The module.js is the entrypoint. It's worth keeping in mind that the smaller this file is the less effect it has on the performance of Grafana as a whole during the app preload phase which is currently render blocking.
2. Rename your module.ts to module.tsx and take advantage of Suspense, lazy, and webpacks dynamic import to lazy load your apps rootPage and (if it has one) its config page too.
3. If your app contains additional routes and pages they are likely the quickest way to reduce bundle size further by lazy loading them.
4. Any component registry (i.e. an array of objects that contain components) should be considered a target for code splitting with Suspense / lazy to further reduce bundle size.
5. Any components used with the plugin ui extensions api should be considered a target for code splitting with Suspense and lazy to remove them from the bundled module.js file.

Below are two examples of Grafana plugins that have recently been code split or are in the process of being code split. The motions are generally the same for all app plugins as the module.js revolves mostly around the AppPlugin class. These should help give you a better understanding of what's involved:

• SLO app PR. This reduced the module.js from ~900kb to 12kb.
• Collector app branch. This reduced the module.js from ~2.7mb to 100kb.

Further information:

• The Survivejs book code splitting chapter
• Web.dev code splitting with lazy and Suspense

[leeoniya]

btw, this is what we're seeing when loading up an empty dashboard on an ephemeral instance, to give you an idea of potential impact on overall load times:

https://ephemeral1511182192959leeoniy.grafana-dev.net/d/cdwx3aa48mvb4d/empty?from=now-6h&to=now&timezone=browser