[meta] Reduce App Services bundle sizes

[Dosant]

Initial bundle size of the app services plugins need to get under 100Kb:

• data [data] Reduce data bundle size #84788
  • Needs to get under 100 Kb
  • Make aggs async: Async registries  #65993
    • POC with async registries (wip) D/2021 09 20 async registry aggs #112566
  • [index patterns] break index patterns out of data plugin into its own plugin #104367
• uiActionsEnhanced [uiActionsEnhanced] Reduce page load bundle to under 100kB #95872
• Expressions [expressions] Reduce page load bundle to under 100kB #95862
• Embeddables [embeddable] Reduce page load bundle to under 100kB #95860
• KibanaUtils [kibanaUtils] Reduce page load bundle to under 100kB #95866
• KibanaReact [kibanaReact] Reduce page load bundle to under 100kB #95865

Also can be improved:

• Field formats (load formats async needs Async registries  #65993)
  • POC with async registries: D/2021 09 13 async registry #111954
• Embeddable
  • load component code async
  • make registry async
• Further improve kibana utils [KibanaUtils] Reduce kibanaUtils bundle size #114988
• Further improve kibana react [KibanaReact] Reduce kibanaReact bundle size #114990 Not app-services anymore
• Further improve expressions with async registry

You can learn why this is important and how to analyze bundle size here https://www.elastic.co/guide/en/kibana/current/plugin-performance.html

One direction how we will approach this is by introducing an "Async registry" concept #65993 which will encourage all registered items to be loaded async. This will not only help app services bundles but will benefit bundles of everyone who adds items to our registries.

Besides taking care of our registries, there are definitely still a bunch of lower-hanging fruits. Things to take care of first:

• Pay attention to React components included into the initial bundle. Those are easy to convert into a lazy component with Suspense. example
• Pay attention to heavy client-side dependencies. Possibly those can be replaced with lighter alternatives or loaded lazily. For example, take a look at uiActionsEnhanced bundle which include handlebars example
• Pay attention to dead code, test code and example code. For example, embeddable plugin includes example samples example
• Avoid export * to not accidentally re-export not needed code as part of the initial bundle
• Prefer importing/exporting only types (type) if possible example
• Sometimes we use node js APIs in common/client-side code without realizing that. This works because of auto-polyfill. Polyfill could weigh a lot. Try to avoid this or use lighter alternatives: example
• When using lodash, make sure you import from lodash and not from lodash/*. That's because full lodash is already included into shared deps.
• Try to import scss into async chunks together with components. Avoid importing in plugin root.
• Consider moving static code to a package and import into async chunk
• When looking at registries, consider not doing anything custom that could otherwise be solved by Async registries  #65993 unless there is a large win and clear async point for making loading code async (like here inside embeddable factory

  kibana/src/plugins/visualizations/public/embeddable/visualize_embeddable_async.ts

  Line 18 in 36e7b5f

  const { VisualizeEmbeddable } = await import('./visualize_embeddable');

  )

[elasticmachine]

Pinging @elastic/kibana-app-services (Team:AppServices)

[mattkime]

@Dosant was this closed by accident? Exalate is good at that.

[petrklapka]

@mattkime No... It was me. I got a little overzealous in cleaning up Jira Epics that were not on our roadmap and I closed it because it had no child tasks. There's plenty to still do on this, so I've re-opened it, set it to show on the roadmap, and we need to attach issues/tasks that it references as children so we can manage the tasking.

[lizozom]

@Dosant is this issue still relevant? Think we can close it in the meanwhile

[Dosant]

Further work is not planned. we can close and reopen when needed