Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[KibanaReact] Reduce kibanaReact bundle size #114990

Open
Tracked by #88678
Dosant opened this issue Oct 14, 2021 · 3 comments
Open
Tracked by #88678

[KibanaReact] Reduce kibanaReact bundle size #114990

Dosant opened this issue Oct 14, 2021 · 3 comments
Labels
Feature:kibana-react impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. loe:large Large Level of Effort old Used to help sort old issues on GH Projects which don't support the Created search term. performance Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) technical debt Improvement of the software architecture and operational architecture

Comments

@Dosant
Copy link
Contributor

Dosant commented Oct 14, 2021

part of #112832

kibana_react is under 100Kb #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 #115377
field_icon extract to a package @elastic/kibana-app-services #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 Dosant added performance technical debt Improvement of the software architecture and operational architecture Feature:kibana-react Team:AppServicesUx labels Oct 14, 2021
@exalate-issue-sync exalate-issue-sync bot added impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. loe:small Small Level of Effort loe:large Large Level of Effort and removed loe:small Small Level of Effort labels Oct 15, 2021
@Dosant
Copy link
Contributor Author

Dosant commented Oct 18, 2021

Initially I've started extracting KbnPageTemplate into a package addressing any issues that would come up in the processing. #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 #114129 and this will be a good example of moving UI code from plugin to a package

@cjcenizal
Copy link
Contributor

I created #115595 to track the work of moving split_panel into console. We'll work on this for 8.1.

@nreese
Copy link
Contributor

nreese commented Oct 19, 2021

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

@Dosant Dosant added Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) and removed Team:AppServicesUx labels Mar 16, 2022
@lizozom lizozom changed the title [KibanaReact] Declutter and reduce bundle size [KibanaReact] Reduce Kibana React bundle size Apr 18, 2022
@lizozom lizozom changed the title [KibanaReact] Reduce Kibana React bundle size [KibanaReact] Reduce kibanaReact bundle size Apr 18, 2022
@petrklapka petrklapka added the old Used to help sort old issues on GH Projects which don't support the Created search term. label Sep 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:kibana-react impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. loe:large Large Level of Effort old Used to help sort old issues on GH Projects which don't support the Created search term. performance Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) technical debt Improvement of the software architecture and operational architecture
Projects
None yet
Development

No branches or pull requests

4 participants