avoid async imports that execute during plugin setup and start methods

nreese commented 1 month ago

Problematic pattern

Avoid the pattern below, where plugin setup or start method async imports code during method execution.

Promise.all([
  asyncCheck,
  import('./fileOne'),
  import('./fileTwo'),
]).then(
  ([
    asyncCheckResults,
    { registerStuffOne },
    { registerStuffTwo },
  ]) => {
    if (asyncCheckResults) {
      registerStuffOne();
      registerStuffTwo();
    }
  }
);

This results in poor performance because the first Kibana page load requires additional server requests to download async modules. In the screen shot below, notice how there are 5 additional requests made to download dashboard bundles.

This pattern masks the true page load bundle size, as async imported code is not counted towards page load bundle size.

Examples that follow this anti-pattern

src/plugins/dashboard/public/plugin.tsx
x-pack/plugins/aiops/public/plugin.tsx

Preferred pattern

Instead, synchronously import code in the plugin so that true page load bundle size is captured.

import { registerStuffOne } from './fileOne';
import { registerStuffTwo } from './fileTwo';
Promise.all([
  asyncCheck,
]).then(
  (asyncCheckResults) => {
    if (asyncCheckResults) {
      registerStuffOne();
      registerStuffTwo();
    }
  }
);

thomasneirynck commented 1 month ago

ML has an example of this as well: https://github.com/elastic/kibana/issues/189755

elasticmachine commented 1 month ago

Pinging @elastic/kibana-core (Team:Core)

walterra commented 1 week ago

Thanks for documenting this. We fixed it now for the aiops and dataVisualizer plugin:

Doing it for the ml plugin is more work, but we have a PoC already that shows that we can fix the pattern and keep the loading bundle below 100Kbytes. Like mentioned elsewhere, it would be great if UI actions could be registered asynchronously!

elasticmachine commented 1 week ago

Pinging @elastic/ml-ui (:ml)

elastic / kibana

avoid async imports that execute during plugin setup and start methods #194171

Problematic pattern

Preferred pattern