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

#324410 (comment 531866180)

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