Merge branch 'dmishunov-monaco-tag' into 'master'

Introduced granular control to Monaco tag

See merge request gitlab-org/gitlab!61690

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' }