Threat Monitoring Performance Optimization: Dynamically Load Large Imports
Why are we doing this work
The performance of our Threat Monitoring page is not meeting the standards set across our product for page load times. This is based on the following sources:
- Webpack analysis: https://gitlab-org.gitlab.io/-/gitlab/-/jobs/1106660481/artifacts/bundle-size-review/comparison.html
- Sitespeed report: https://dashboards.gitlab.net/d/000000043/sitespeed-page-summary?from=now-7d&orgId=1&to=now&var-base=sitespeed_io&var-path=desktop&var-group=gitlab_com&var-page=Protect_Threat_Monitoring&var-browser=chrome&var-connectivity=cable&var-function=median
Proposal
Asynchronously Load Large Imports
@pgascouvaillancourt noticed that the threat monitoring page loads a large library called monaco
(used for the yaml input boxes)
(from https://gitlab-org.gitlab.io/-/gitlab/-/jobs/1106660481/artifacts/bundle-size-review/comparison.html)
So the page would load faster if we dynamically imported this specific library so that it only loads when it is needed.
Relevant links
Non-functional requirements
-
Documentation: -
Feature flag: -
Performance: -
Testing:
Implementation plan
-
frontend dynamically import component with monaco-editor
in it