[Lens] Optimize async chunks #211921

dej611 · 2025-02-20T15:40:09Z

Summary

While documenting some Lens architecture I've noticed how chunks are organized in Lens, so I've taken a quick spin to reduce the amount of requests to load a dashboard panel and more in general the number of async chunks produced by webpack.

This PR aims to do 2 things:

optimize the number of chunks generated by webpack
optimize the number of requests done to load a Lens embedable panel
optimize any await flow to do **other things ™️ ** while in idle to load

Final results

Reduce the number of chunks

The final number of chunks got reduced from 24 to 15. The bundle size has remained almost the same.

Before	After

There's still some improvement margin here, but the changes mainly includes he followings:

the embeddable is now bundled together with the async_services bundle
- as both are required to render the panel in a dashboard, this change should speed up a bit the dashboard use case vs the Lens editor one
Expression implementations has been deferred into their separate bundles
- this should reduce a bit the initial plugin.js bundle by few kb
- most of the times the bundled expressions are used together, so it makes sense to bundle those 3/4 together rather than have 4 tiny bundles to async load and prevent waterfall async import calls which led to poor performance
Defer a component in the @kbn/unified-field-list component
- this was making load some edit component within the async_services bundle even in dashboard.
- because this is a component only required in Lens editor, this has been deferred
Async register actions as recommended by @nreese

Reduce the number of requests

The final number of chunks requested to load a lens panel on a dashboard went from 12 to 4.
The overall bundle size has remained almost the same, but the distributions of weights have slightly changed.
Surprisingly there's 1 MB which is gone somewhere, but that doesn't seem to have an actual impact on the overall loading experience yet.

Before	After

Optimize any `await` call

Well, this is hard to test. So I have no direct proof at the moment. 🤷

cc @thomasneirynck

dej611 · 2025-02-20T15:40:24Z

/ci

dej611 · 2025-02-21T09:46:44Z

/ci

…-fix'

dej611 · 2025-02-21T10:37:03Z

/ci

…into fix/speed-up-lens

dej611 · 2025-02-21T14:44:17Z

/ci

dej611 · 2025-03-03T15:07:44Z

/ci

elasticmachine · 2025-03-12T14:37:07Z

Pinging @elastic/kibana-visualizations (Team:Visualizations)

elasticmachine · 2025-03-13T12:48:42Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`lens`	1527	1528	+1

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/unified-field-list`	288	289	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`discover`	960.5KB	961.0KB	+554.0B
`lens`	1.5MB	1.5MB	-5.5KB
`securitySolution`	8.9MB	8.9MB	+826.0B
`slo`	921.8KB	922.6KB	+785.0B
total			-3.4KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`lens`	58.8KB	57.4KB	-1.4KB

Unknown metric groups

async chunk count

id	before	after	diff
`discover`	33	34	+1
`lens`	27	16	-11
`securitySolution`	128	129	+1
`slo`	32	33	+1
total			-8

References to deprecated APIs

id	before	after	diff
`lens`	90	85	-5

History

💚 Build #283165 succeeded dd3d22d
💔 Build #282748 failed cc77bbc
💔 Build #282275 failed aca0d47
💔 Build #282221 failed c6b3113
💔 Build #280367 failed 22ce7d1
💔 Build #278442 failed 02a3ad3

cc @dej611

markov00

All good here, the room for improvement exist, but this is a great step toward that.
Thanks

davismcphee

I just have a couple of questions about the Data Discovery changes.

...ackages/shared/kbn-unified-field-list/src/components/field_item_button/field_item_button.tsx

src/platform/packages/shared/kbn-unified-field-list/src/components/field_item_button/index.tsx

…into fix/speed-up-lens

…urce-definitions/scripts/fix-location-collection.ts'

davismcphee

I don't think you need my review anymore with the latest changes, but LGTM nonetheless!

src/platform/packages/shared/kbn-unified-field-list/src/components/field_item_button/index.tsx

…urce-definitions/scripts/fix-location-collection.ts'

dej611 · 2025-03-25T08:39:44Z

Sorry folks for the new ping. After some changes I've settled with this setup which makes the async bundle size go a little bit higher, but with fewer async chunks to load.
Now 9 chunks out of 18 are from the unified-field-list package (so not loaded when inline editing) and the remaining half are Lens feature specific.

davismcphee

Latest Data Discovery changes to export GenericFieldItemButtonType make sense to me now that I understand the challenges with generic components and lazy loading 👍

elasticmachine · 2025-03-28T15:17:55Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`lens`	1359	1364	+5

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/unified-field-list`	288	290	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`lens`	1.4MB	1.4MB	+24.8KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`lens`	58.7KB	57.9KB	-789.0B

Unknown metric groups

API count

id	before	after	diff
`@kbn/unified-field-list`	317	319	+2

async chunk count

id	before	after	diff
`lens`	27	18	-9

References to deprecated APIs

id	before	after	diff
`lens`	88	83	-5

History

💔 Build #287965 failed 09bbe4b
💛 Build #286691 was flaky ad10bf2
💔 Build #286602 failed ba03bd1
💚 Build #285528 succeeded 49b9c2b
💔 Build #285484 failed 6974f41

cc @dej611

thomasneirynck · 2025-03-31T18:01:29Z

This PR, and another Lens-focussed one (#215792), have shown a big improvement in how long it takes to load a dashboard.

Both of them together have caused the median dashboard_duration-time (ie. time after the spinner until all data is loaded on screen) to drop 0.5 second (3.9s->3.4s) on our benchmarks.

Comparing before they merged to after they merged:

@nreese

## Summary While documenting some Lens architecture I've noticed how chunks are organized in Lens, so I've taken a quick spin to reduce the amount of requests to load a dashboard panel and more in general the number of async chunks produced by webpack. This PR aims to do 2 things: * optimize the number of chunks generated by webpack * optimize the number of requests done to load a Lens embedable panel * optimize any `await` flow to do **other things ™️ ** while in idle to load ### Final results #### Reduce the number of chunks The final number of chunks got reduced from 24 to 15. The bundle size has remained almost the same. | Before | After | | ------------- | ------------- | | <img width="1443" alt="Screenshot 2025-03-10 at 12 53 21" src="https://github.com/user-attachments/assets/65030955-7b7c-493c-9559-fbb9ef9089d4" /> | <img width="1101" alt="Screenshot 2025-03-10 at 12 51 53" src="https://github.com/user-attachments/assets/99b9b78d-931a-40ed-bda6-820584c1337e" /> | There's still some improvement margin here, but the changes mainly includes he followings: * the embeddable is now bundled together with the `async_services` bundle * as both are required to render the panel in a dashboard, this change should speed up a bit the dashboard use case vs the Lens editor one * Expression implementations has been deferred into their separate bundles * this should reduce a bit the initial `plugin.js` bundle by few kb * most of the times the bundled expressions are used together, so it makes sense to bundle those 3/4 together rather than have 4 tiny bundles to async load and prevent waterfall `async import` calls which led to poor performance * Defer a component in the `@kbn/unified-field-list` component * this was making load some edit component within the `async_services` bundle even in dashboard. * because this is a component only required in Lens editor, this has been deferred * Async register actions as recommended by @nreese #### Reduce the number of requests The final number of chunks requested to load a lens panel on a dashboard went from 12 to 4. The overall bundle size has remained almost the same, but the distributions of weights have slightly changed. Surprisingly there's 1 MB which is gone somewhere, but that doesn't seem to have an actual impact on the overall loading experience yet. | Before | After | | ------------- | ------------- | | <img width="1445" alt="Screenshot 2025-03-10 at 12 58 08" src="https://github.com/user-attachments/assets/faab091b-305d-43ad-8be2-2f3bb83913a3" /> | <img width="1110" alt="Screenshot 2025-03-10 at 12 58 32" src="https://github.com/user-attachments/assets/f88ac9f5-80a6-42d3-8e3b-3013df05cb8b" /> | #### Optimize any `await` call Well, this is hard to test. So I have no direct proof at the moment. 🤷 cc @thomasneirynck --------- Co-authored-by: kibanamachine <[email protected]>

📦 Optimize async loading chunks

7e59e26

dej611 added Team:Visualizations Visualization editors, elastic-charts and infrastructure release_note:skip Skip the PR/issue when compiling release notes Feature:Lens labels Feb 20, 2025

Merge remote-tracking branch 'upstream/main' into fix/speed-up-lens

2b3528f

dej611 added the ci:build-webpack-bundle-analyzer label Feb 21, 2025

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

6bb9b1d

…-fix'

dej611 added 2 commits February 21, 2025 15:19

📦 Async load some actions

73dceeb

Merge branch 'fix/speed-up-lens' of https://github.com/dej611/kibana …

02a3ad3

…into fix/speed-up-lens

Merge branch 'main' into fix/speed-up-lens

22ce7d1

dej611 added 5 commits March 10, 2025 14:40

♻️ Revisit async imports

6ca1e31

⚡ Async load component

c6b3113

:rotate_light: Address linting issues

aca0d47

✅ Fix test

cc77bbc

Merge remote-tracking branch 'upstream/main' into fix/speed-up-lens

dd3d22d

dej611 marked this pull request as ready for review March 12, 2025 14:37

dej611 requested review from a team as code owners March 12, 2025 14:37

dej611 self-assigned this Mar 12, 2025

Merge branch 'main' into fix/speed-up-lens

f51edc7

Merge branch 'main' into fix/speed-up-lens

842e727

dej611 added the backport:skip This commit does not require backporting label Mar 14, 2025

Merge branch 'main' into fix/speed-up-lens

e46f2a1

markov00 approved these changes Mar 18, 2025

View reviewed changes

davismcphee reviewed Mar 18, 2025

View reviewed changes

...ackages/shared/kbn-unified-field-list/src/components/field_item_button/field_item_button.tsx Show resolved Hide resolved

src/platform/packages/shared/kbn-unified-field-list/src/components/field_item_button/index.tsx Outdated Show resolved Hide resolved

dej611 and others added 5 commits March 19, 2025 12:51

Merge remote-tracking branch 'upstream/main' into fix/speed-up-lens

2127703

♻️ Remove the async loading

52b0984

🚚 Localize the async loading in Lens for now

726a3c0

Merge branch 'fix/speed-up-lens' of https://github.com/dej611/kibana …

a5fa5b9

…into fix/speed-up-lens

[CI] Auto-commit changed files from 'ts-node .buildkite/pipeline-reso…

6974f41

…urce-definitions/scripts/fix-location-collection.ts'

davismcphee approved these changes Mar 19, 2025

View reviewed changes

src/platform/packages/shared/kbn-unified-field-list/src/components/field_item_button/index.tsx Outdated Show resolved Hide resolved

dej611 and others added 5 commits March 19, 2025 18:07

🐛 Fix test issues

8903148

[CI] Auto-commit changed files from 'ts-node .buildkite/pipeline-reso…

49b9c2b

…urce-definitions/scripts/fix-location-collection.ts'

🚚 Reduce bundle size

7321d66

Merge branch 'main' into fix/speed-up-lens

ba03bd1

♻️ Fix import

ad10bf2

dej611 requested review from markov00 and davismcphee March 25, 2025 08:37

davismcphee approved these changes Mar 25, 2025

View reviewed changes

markov00 approved these changes Mar 27, 2025

View reviewed changes

Merge branch 'main' into fix/speed-up-lens

b8f533e

dej611 enabled auto-merge (squash) March 27, 2025 14:57

dej611 added 2 commits March 28, 2025 09:12

Merge branch 'main' into fix/speed-up-lens

09bbe4b

Merge branch 'main' into fix/speed-up-lens

75ab791

dej611 merged commit db98203 into elastic:main Mar 28, 2025
10 checks passed

kibanamachine added the v9.1.0 label Mar 28, 2025

thomasneirynck mentioned this pull request Mar 31, 2025

[expressionXY] optimize async chunks #215792

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Lens] Optimize async chunks #211921

[Lens] Optimize async chunks #211921

dej611 commented Feb 20, 2025 •

edited

Loading

dej611 commented Feb 20, 2025

dej611 commented Feb 21, 2025

dej611 commented Feb 21, 2025

dej611 commented Feb 21, 2025

dej611 commented Mar 3, 2025

elasticmachine commented Mar 12, 2025

elasticmachine commented Mar 13, 2025

async chunk count

References to deprecated APIs

markov00 left a comment

davismcphee left a comment

davismcphee left a comment

dej611 commented Mar 25, 2025

davismcphee left a comment

elasticmachine commented Mar 28, 2025

API count

async chunk count

References to deprecated APIs

thomasneirynck commented Mar 31, 2025

[Lens] Optimize async chunks #211921

[Lens] Optimize async chunks #211921

Conversation

dej611 commented Feb 20, 2025 • edited Loading

Summary

Final results

Reduce the number of chunks

Reduce the number of requests

Optimize any await call

dej611 commented Feb 20, 2025

dej611 commented Feb 21, 2025

dej611 commented Feb 21, 2025

dej611 commented Feb 21, 2025

dej611 commented Mar 3, 2025

elasticmachine commented Mar 12, 2025

elasticmachine commented Mar 13, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

async chunk count

References to deprecated APIs

History

markov00 left a comment

Choose a reason for hiding this comment

davismcphee left a comment

Choose a reason for hiding this comment

davismcphee left a comment

Choose a reason for hiding this comment

dej611 commented Mar 25, 2025

davismcphee left a comment

Choose a reason for hiding this comment

elasticmachine commented Mar 28, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

async chunk count

References to deprecated APIs

History

thomasneirynck commented Mar 31, 2025

dej611 commented Feb 20, 2025 •

edited

Loading

Optimize any `await` call