Merge branch 'dmishunov-prefetch-asset-tag' into 'master'

Generalized the `monaco_tag` into `prefetch_asset_tags`

See merge request gitlab-org/gitlab!61982

app/views/ide/_show.html.haml

@@ -4,7 +4,7 @@
 - add_page_specific_style 'page_bundles/build'
 - add_page_specific_style 'page_bundles/ide'
 
-- content_for :monaco_tag do
+- content_for :prefetch_asset_tags do
   - webpack_preload_asset_tag('monaco')
 
 #ide.ide-loading{ data: ide_data }

app/views/layouts/_head.html.haml

@@ -32,7 +32,7 @@
   - if page_canonical_link
     %link{ rel: 'canonical', href: page_canonical_link }
 
-  = yield :monaco_tag
+  = yield :prefetch_asset_tags
 
   = favicon_link_tag favicon, id: 'favicon', data: { original_href: favicon }, type: 'image/png'
 

app/views/projects/blob/edit.html.haml

 - breadcrumb_title _("Repository")
 - page_title _("Edit"), @blob.path, @ref
-- content_for :monaco_tag do
+- content_for :prefetch_asset_tags do
   - webpack_preload_asset_tag('monaco')
 
 - if @conflict

app/views/projects/blob/show.html.haml

 - breadcrumb_title "Repository"
 - page_title @blob.path, @ref
 - signatures_path = namespace_project_signatures_path(namespace_id: @project.namespace.full_path, project_id: @project.path, id: @last_commit, limit: 1)
-- content_for :monaco_tag do
+- content_for :prefetch_asset_tags do
   - webpack_preload_asset_tag('monaco', prefetch: true)
 
 .js-signature-container{ data: { 'signatures-path': signatures_path } }

app/views/projects/ci/pipeline_editor/show.html.haml

 - page_title s_('Pipelines|Pipeline Editor')
-- content_for :monaco_tag do
+- content_for :prefetch_asset_tags do
   - webpack_preload_asset_tag('monaco')
 
 #js-pipeline-editor{ data: js_pipeline_editor_data(@project) }

app/views/snippets/edit.html.haml

 - page_title _("Edit"), "#{@snippet.title} (#{@snippet.to_reference})", _("Snippets")
 - @content_class = "limit-container-width" unless fluid_layout
-- content_for :monaco_tag do
+- content_for :prefetch_asset_tags do
   - webpack_preload_asset_tag('monaco')
 
 %h3.page-title

app/views/snippets/show.html.haml

@@ -9,7 +9,7 @@
 - add_to_breadcrumbs _("Snippets"), dashboard_snippets_path
 - breadcrumb_title @snippet.to_reference
 - page_title "#{@snippet.title} (#{@snippet.to_reference})", _("Snippets")
-- content_for :monaco_tag do
+- content_for :prefetch_asset_tags do
   - webpack_preload_asset_tag('monaco', prefetch: true)
 
 #js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id} }

doc/development/fe_guide/performance.md

@@ -246,6 +246,55 @@ Layout to be recalculated, which is much more expensive. For details on this, se
 If you _do_ need to change layout (for example, a sidebar that pushes main content over), prefer [FLIP](https://aerotwist.com/blog/flip-your-animations/). FLIP allows you to change expensive
 properties once, and handle the actual animation with transforms.
 
+### Prefetching assets
+
+In addition to prefetching data from the [API](graphql.md#making-initial-queries-early-with-graphql-startup-calls)
+we allow prefetching the named JavaScript "chunks" as
+[defined in the Webpack configuration](https://gitlab.com/gitlab-org/gitlab/-/blob/master/config/webpack.config.js#L298-359).
+We support two types of prefetching for the chunks:
+
+- The [`prefetch` link type](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/prefetch)
+  is used to prefetch a chunk for the future navigation
+- The [`preload` link type](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preloadh)
+  is used to prefetch a chunk that is crucial for the current navigation but is not 
+  discovered until later in the rendering process
+
+Both `prefetch` and `preload` links bring the loading performance benefit to the pages. Both are 
+fetched asynchronously, but contrary to [deferring the loading](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer)
+of the assets which is used for other JavaScript resources in the product by default, `prefetch` and
+`preload` neither parse nor execute the fetched script unless explicitly imported in any JavaScript 
+module. This allows to cache the fetched resources without blocking the execution of the 
+remaining page resources.
+
+To prefetch a JavaScript chunk in a HAML view, `:prefetch_asset_tags` with the combination of 
+the `webpack_preload_asset_tag` helper is provided:
+
+```javascript
+- content_for :prefetch_asset_tags do
+  - webpack_preload_asset_tag('monaco')
+```
+
+This snippet will add a new `<link rel="preload">` element into the resulting HTML page:
+
+```HTML
+<link rel="preload" href="/assets/webpack/monaco.chunk.js" as="script" type="text/javascript">
+```
+
+By default, `webpack_preload_asset_tag` will `preload` the chunk. You don't need to worry about 
+`as` and `type` attributes for preloading the JavaScript chunks. However, when a chunk is not 
+critical, for the current navigation, one has to explicitly request `prefetch`:
+
+```javascript
+- content_for :prefetch_asset_tags do
+  - webpack_preload_asset_tag('monaco', prefetch: true)
+```
+
+This snippet will add a new `<link rel="prefetch">` element into the resulting HTML page:
+
+```HTML
+<link rel="prefetch" href="/assets/webpack/monaco.chunk.js">
+```
+
 ## Reducing Asset Footprint
 
 ### Universal code

ee/app/views/projects/threat_monitoring/show.html.haml

 - breadcrumb_title s_("ThreatMonitoring|Threat Monitoring")
 - page_title s_("ThreatMonitoring|Threat Monitoring")
 - @content_wrapper_class = 'js-threat-monitoring-container-wrapper'
-- content_for :monaco_tag do
+- content_for :prefetch_asset_tags do
   - webpack_preload_asset_tag('monaco', prefetch: true)
 
 - default_environment_id = @project.default_environment&.id || -1