elastic / kibana

Your window into the Elastic Stack
https://www.elastic.co/products/kibana
Other
19.71k stars 8.13k forks source link

[APM] Optimize initial load bundles #191600

Closed tonyghiani closed 1 week ago

tonyghiani commented 2 weeks ago

📓 Summary

Part of #191599

The APM plugin loads a lot of bundle chunks on the first Kibana load.

Image

This happens because the client-side routing system of the APM plugin doesn’t lazy load any page content, building instead a single apmRouter instance that is used in different contexts as setup/start time (creating locators, registering embeddables).

This is based on how the apmRouter is initialized, since it takes the page contents as JSX elements (implies code is immediately loaded) and remove the chance for lazy loading the unused code.

The sum of the initially loaded chunks in production after tree-shaking const of ~16% of all the resources transmitted to Kibana on any page load. This numbers and their impact can be drastically improved (remove around 90% on initial code) by refactoring how the apmRouter is initialized.

Measures that could be taken to improve the initial bundle also include:

elasticmachine commented 2 weeks ago

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)