[APM] Reduce initially loaded bundles by 98% #191658
Conversation
🤖 GitHub commentsExpand to view the GitHub comments
Just comment with:
|
tonyghiani
added
release_note:skip
…ibana into 191600-optimize-apm-bundles
|
/ci |
|
Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services) |
botelastic
bot
added
the
ci:project-deploy-observability
| const DiagnosticsImportExport = dynamic(() => | ||
| import('./import_export_tab').then((mod) => ({ default: mod.DiagnosticsImportExport })) | ||
| ); | ||
| const DiagnosticsApmDocuments = dynamic(() => | ||
| import('./apm_documents_tab').then((mod) => ({ default: mod.DiagnosticsApmDocuments })) | ||
| ); |
There was a problem hiding this comment.
IMHO we don't need to go overboard here. Can't we load the diagnostics page in a single async chunk?
There was a problem hiding this comment.
Not prob, I can revert this to a single chunk removing the imports. To keep in mind, this will load an extra ~10kb of minified code before it gets really used in that async chunk, which is not a big deal but still worth noticing.
There was a problem hiding this comment.
10% increase in what scenario? the user that loads the diagnostics page loads 10% extra JavaScript compared to splitting the diagnostic page in separate chunks, or also for anyone who e.g. uses the embeddable or loads Kibana at all?
There was a problem hiding this comment.
A user landing on the diagnostics page loads the JS for all the available tabs at once, even if the user only visits the Summary tab. With the lazy loading I used, every tab chunk (~2.5kb) is loaded only when visiting the tab. Should we still keep it split in this case?
There was a problem hiding this comment.
nah let's just do one chunk, 2.5kb is not worth the network overhead
There was a problem hiding this comment.
Screen.Recording.2024-09-02.at.09.34.00.mov
There was a problem hiding this comment.
btw, same for the others, I think we can find a better balance between loading too much upfront and loading too many small chunks
There was a problem hiding this comment.
I reduced code splitting to where it only has the biggest impact now. The entry point for other pages is not impacted (load only apm.plugin.js)
tonyghiani
force-pushed
the
191600-optimize-apm-bundles
branch
from
f777f62
to
e12e5cb
Compare
tonyghiani
force-pushed
the
191600-optimize-apm-bundles
branch
from
e12e5cb
to
97381d4
Compare
tonyghiani
force-pushed
the
191600-optimize-apm-bundles
branch
from
e7aa999
to
d60cff5
Compare
|
@elasticmachine merge upstream |
💚 Build Succeeded
Metrics [docs]Module Count
Async chunks
Page load bundle
History
To update your PR or re-run it, just comment with: |
kibanamachine
added
v8.16.0
backport:skip
📓 Summary
Closes #191600
Moving on invocation site the dynamic import to instantiate the apm locator and registering the embeddable removed the async import on the biggest APM js chunks.
In practice, we passed from loading ~900kb of JS to ~10kb, with a total reduction of about ~16% of all the code loaded by Kibana for any page.
There is also deeper code splitting for the APM routes to only load specific features when required on while using the APM app.
Mandatory celebration GIF