Skip to content

[KibanaReact] Reduce kibanaReact bundle size #114990

@Dosant

Description

@Dosant

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Feature:kibana-reactTeam:SharedUXPlatform AppEx-SharedUX (formerly Global Experience) t//impact:lowAddressing this issue will have a low level of impact on the quality/strength of our product.loe:largeLarge Level of EffortoldUsed to help sort old issues on GH Projects which don't support the Created search term.performancetechnical debtImprovement of the software architecture and operational architecture

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions