<!-- Implementation issues are used break-up a large piece of work into small, discrete tasks that can move independently through the build workflow steps. They're typically used to populate a Feature Epic. Once created, an implementation issue is usually refined in order to populate and review the implementation plan and weight. Example workflow: https://about.gitlab.com/handbook/engineering/development/threat-management/planning/diagram.html#plan --> ## 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 https://gitlab.com/gitlab-org/gitlab/-/issues/324410#note_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](https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components) this specific library so that it only loads when it is needed. <!-- A brief explanation of the why, not the what or how. Assume the reader doesn't know the background and won't have time to dig-up information from comment threads. --> ## Relevant links <!-- Information that the developer might need to refer to when implementing the issue. - [Design Issue](https://gitlab.com/gitlab-org/gitlab/-/issues/<id>) - [Design 1](https://gitlab.com/gitlab-org/gitlab/-/issues/<id>/designs/<image>.png) - [Design 2](https://gitlab.com/gitlab-org/gitlab/-/issues/<id>/designs/<image>.png) - [Similar implementation](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/<id>) --> ## Non-functional requirements <!-- Add details for required items and delete others. --> - [ ] Documentation: - [ ] Feature flag: - [x] Performance: - [ ] Testing: ## Implementation plan <!-- Steps and the parts of the code that will need to get updated. The plan can also call-out responsibilities for other team members or teams. --> - [ ] ~3412464 dynamically import component with `monaco-editor` in it