avoid async imports that execute during plugin setup and start methods

[nreese]

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

1. src/plugins/dashboard/public/plugin.tsx
2. 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]

ML has an example of this as well:
#189755

[elasticmachine]

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

[walterra]

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

• [ML] AIOps: Optimize initial load bundles. #198786
• [ML] Data Visualizer: Optimize initial load bundles. #199029

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]

Pinging @elastic/ml-ui (:ml)