search

elastic / kibana

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

[KibanaReact] Reduce `kibanaReact` bundle size #114990

Open Dosant opened 3 years ago

Dosant commented 3 years ago

part of https://github.com/elastic/kibana/issues/112832

kibana_react is under 100Kb https://github.com/elastic/kibana/issues/95865 🎉 We still have a lot of room for improvement. We also would like to use this opportunity to declutter kibana_react as during new platform migration it became a "shared" place to put stuff to share, but the plugin is "owned" by app-services team.

Screen Shot 2021-10-14 at 14 42 39

The main goal is to reduce initial bundle size, these are the strategies we have:

  1. Wrap a component in a Lazy wrapper, export only a Lazy wrapper. Downside is that consumer code doesn't control lazy loading process. example
  2. Extract component to a package. Make sure it is imported only in async chunks of consumers. Downside is that package code is duplicated between async chunks, so for now makes sense to use Lazy wrapper approach for widely used components example
  3. Move a component back to the plugin where it is used. There are some examples of components with only single use.

2 and 3 allows us to revisit code ownership of some of those components. It would make more sense if for some of those app-services won't be pinged.

Focusing only on those that are still inside the initial bundle, even though it would make sense to revise some of the components that are already code splitter with the Lazy wrapper approach:

Component Code-splitting method New Ownership Done
page_template Lazy wrapper because most of the apps should use this component ? 🔴
url_template_editor Lazy wrapper because depends on CodeEditor @elastic/kibana-app-services 🔴
tablie_list_view Lazy wrapper because depends on page_template @elastic/kibana-app-services 🔴
field_button extract to a package @elastic/kibana-app-services https://github.com/elastic/kibana/pull/115377
field_icon extract to a package @elastic/kibana-app-services https://github.com/elastic/kibana/pull/115377
validated_range extract to a package (used in 2 apps) @elastic/kibana-gis @elastic/kibana-vis-editors 🔴
overview_page extract to a package (used in 2 apps) @elastic/kibana-core 🔴
exit_full_screen_button extract to a package (used in 2 apps) @elastic/kibana-gis @elastic/kibana-presentation 🔴
toolbar_button move to lens (used only there) @elastic/kibana-vis-editors 🔴
split_panel move to console (used only there) @elastic/kibana-stack-management 🔴

Also we have assets/ folder. Assets are used from different plugins by static URL which is unsafe. I think we should copy those assets where they are used and prefer require() usage instead of static URL, so that build system could check if they are present. cc @elastic/eui-design @elastic/kibana-operations

Dosant commented 3 years ago

Initially I've started extracting KbnPageTemplate into a package addressing any issues that would come up in the processing. https://github.com/elastic/kibana/pull/114129. When I was almost finished I decided to hold off realizing that this might not be the best candidate for a package:

  1. Initial bundle size reduced -36Kb, but because it is used by a lot of apps (and I assume ideally every app should use it) the total async chunk increased + 413Kb
  2. There are a couple of usage of core's APIs (is dark mode, basePath.prepend). Moving it to a package has a downside that we can't use core's and kibana_react's helpers to access those. This increase explicit api surface of the component, making it more difficult to consume
  3. There is parallel work in progress on this component and would be nice to avoid conflicts.

I think instead of moving this to a package, we should leave this in a plugin for now and just wrap it into Lazy wrapper to reduce initial bundle size.

jfyi @cchaos

I will extract some simpler component from kibana_react and will merge any tooling change we did in https://github.com/elastic/kibana/pull/114129 and this will be a good example of moving UI code from plugin to a package

cjcenizal commented 3 years ago

I created https://github.com/elastic/kibana/issues/115595 to track the work of moving split_panel into console. We'll work on this for 8.1.

nreese commented 3 years ago

exit_full_screen_button is also used in maps. Updating table to reflect this