Introduced granular control to Monaco tag

Instead of globaly preloading Monaco on all routes, we
granularly control whether to preload, prefetch, or
completely ignore it.

Addressing review comments

Added the changelog

Added the very basic test

Correct file name for the spec

Baked the crossorigin into helper

As per review

Testing the WebpackHelper

Removed redundant request check

Small changes to spec file

Small change in webpack_preload_asset_tag method

app/helpers/webpack_helper.rb

 # frozen_string_literal: true
 
 module WebpackHelper
+  def prefetch_link_tag(source)
+    href = asset_path(source)
+
+    link_tag = tag.link(rel: 'prefetch', href: href)
+
+    early_hints_link = "<#{href}>; rel=prefetch"
+
+    request.send_early_hints("Link" => early_hints_link)
+
+    link_tag
+  end
+
   def webpack_bundle_tag(bundle)
     javascript_include_tag(*webpack_entrypoint_paths(bundle))
   end
 
   def webpack_preload_asset_tag(asset, options = {})
-    preload_link_tag(Gitlab::Webpack::Manifest.asset_paths(asset).first, options)
+    path = Gitlab::Webpack::Manifest.asset_paths(asset).first
+
+    if options.delete(:prefetch)
+      prefetch_link_tag(path)
+    else
+      preload_link_tag(path, options)
+    end
   end
 
   def webpack_controller_bundle_tags

app/views/ide/_show.html.haml

@@ -4,6 +4,9 @@
 - add_page_specific_style 'page_bundles/build'
 - add_page_specific_style 'page_bundles/ide'
 
+- content_for :monaco_tag do
+  - webpack_preload_asset_tag('monaco')
+
 #ide.ide-loading{ data: ide_data }
   .text-center
     .gl-spinner.gl-spinner-md

app/views/layouts/_head.html.haml

@@ -32,7 +32,7 @@
   - if page_canonical_link
     %link{ rel: 'canonical', href: page_canonical_link }
 
-  = webpack_preload_asset_tag("monaco")
+  = yield :monaco_tag
 
   = 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
+  - webpack_preload_asset_tag('monaco')
 
 - if @conflict
   .gl-alert.gl-alert-danger.gl-mb-5.gl-mt-5

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
+  - 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
+  - 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
+  - webpack_preload_asset_tag('monaco')
 
 %h3.page-title
   = _("Edit Snippet")

app/views/snippets/show.html.haml

@@ -9,6 +9,8 @@
 - 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
+  - webpack_preload_asset_tag('monaco', prefetch: true)
 
 #js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id} }
 

changelogs/unreleased/dmishunov-monaco-tag.yml

+---
+title: Introduced granular control to Monaco tag
+merge_request: 61690
+author:
+type: performance

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
+  - webpack_preload_asset_tag('monaco', prefetch: true)
 
 - default_environment_id = @project.default_environment&.id || -1
 

spec/helpers/webpack_helper_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe WebpackHelper do
+  let(:source) { 'foo.js' }
+  let(:asset_path) { "/assets/webpack/#{source}" }
+
+  describe '#prefetch_link_tag' do
+    it 'returns prefetch link tag' do
+      expect(helper.prefetch_link_tag(source)).to eq("<link rel=\"prefetch\" href=\"/#{source}\">")
+    end
+  end
+
+  describe '#webpack_preload_asset_tag' do
+    before do
+      allow(Gitlab::Webpack::Manifest).to receive(:asset_paths).and_return([asset_path])
+    end
+
+    it 'preloads the resource by default' do
+      expect(helper).to receive(:preload_link_tag).with(asset_path, {}).and_call_original
+
+      output = helper.webpack_preload_asset_tag(source)
+
+      expect(output).to eq("<link rel=\"preload\" href=\"#{asset_path}\" as=\"script\" type=\"text/javascript\">")
+    end
+
+    it 'prefetches the resource if explicitly asked' do
+      expect(helper).to receive(:prefetch_link_tag).with(asset_path).and_call_original
+
+      output = helper.webpack_preload_asset_tag(source, prefetch: true)
+
+      expect(output).to eq("<link rel=\"prefetch\" href=\"#{asset_path}\">")
+    end
+  end
+end

spec/views/layouts/_head.html.haml_spec.rb

@@ -62,12 +62,6 @@ RSpec.describe 'layouts/_head' do
     expect(rendered).to match('<link rel="stylesheet" media="print" href="/stylesheets/highlight/themes/solarised-light.css" />')
   end
 
-  it 'preloads Monaco' do
-    render
-
-    expect(rendered).to match('<link rel="preload" href="/assets/webpack/monaco.chunk.js" as="script" type="text/javascript">')
-  end
-
   context 'when an asset_host is set and snowplow url is set' do
     let(:asset_host) { 'http://test.host' }
     let(:snowplow_collector_hostname) { 'www.snow.plow' }