-
Notifications
You must be signed in to change notification settings - Fork 8.5k
Description
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.
The main goal is to reduce initial bundle size, these are the strategies we have:
- Wrap a component in a
Lazywrapper, export only aLazywrapper. Downside is that consumer code doesn't control lazy loading process. example - 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
Lazywrapper approach for widely used components example - 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
