fix(plugin-legacy): remove modulepreload links for legacy-only builds (#22332)

Co-authored-by: sapphi-red <49056869+sapphi-red@users.noreply.github.com>

Author: cyphercodes

packages/plugin-legacy/src/__tests__/index.spec.ts

@@ -0,0 +1,45 @@
+import { describe, expect, test } from 'vitest'
+import { modulePreloadLinkRE } from '../index'
+
+describe('modulePreloadLinkRE', () => {
+  const matches: Array<[string, string]> = [
+    ['rel first', '<link rel="modulepreload" crossorigin href="/assets/x.js">'],
+    [
+      'rel after other attributes',
+      '<link href="/assets/x.js" rel="modulepreload">',
+    ],
+    ['rel only', '<link rel="modulepreload">'],
+    ['self-closing', '<link rel="modulepreload"/>'],
+    ['self-closing with space', '<link rel="modulepreload" />'],
+    ['single quotes', "<link rel='modulepreload' href='/assets/x.js'>"],
+    [
+      'attributes across multiple lines',
+      '<link\n  rel="modulepreload"\n  href="/assets/x.js"\n>',
+    ],
+  ]
+
+  for (const [name, html] of matches) {
+    test(`matches: ${name}`, () => {
+      expect(html.replace(modulePreloadLinkRE, '')).toBe('')
+    })
+  }
+
+  const nonMatches: Array<[string, string]> = [
+    ['tag name with suffix', '<linkfoo rel="modulepreload">'],
+    ['custom element with hyphen', '<link-preview rel="modulepreload">'],
+    ['bare link tag', '<link>'],
+    ['stylesheet link', '<link rel="stylesheet" href="/assets/x.css">'],
+    ['preload (not modulepreload)', '<link rel="preload" href="/assets/x.js">'],
+    [
+      'attribute name ending in rel',
+      '<link xrel="modulepreload" href="/assets/x.js">',
+    ],
+    ['mismatched quotes', `<link rel="modulepreload'>`],
+  ]
+
+  for (const [name, html] of nonMatches) {
+    test(`does not match: ${name}`, () => {
+      expect(html.replace(modulePreloadLinkRE, '')).toBe(html)
+    })
+  }
+})

packages/plugin-legacy/src/index.ts

@@ -125,6 +125,8 @@ const _require = createRequire(import.meta.url)
 
 const nonLeadingHashInFileNameRE = /[^/]+\[hash(?::\d+)?\]/
 const prefixedHashInFileNameRE = /\W?\[hash(?::\d+)?\]/
+export const modulePreloadLinkRE: RegExp =
+  /<link(?![\w-])[^>]*?\srel=(['"])modulepreload\1[^>]*>/g
 
 // browsers supporting dynamic import + import.meta.resolve + async generator
 const modernTargetsEsbuild = [
@@ -641,7 +643,9 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
         }
       }
       if (!genModern) {
-        html = html.replace(/<script type="module".*?<\/script>/g, '')
+        html = html
+          .replace(/<script type="module".*?<\/script>/g, '')
+          .replace(modulePreloadLinkRE, '')
       }
 
       const tags: HtmlTagDescriptor[] = []

playground/legacy/__tests__/no-polyfills/legacy-no-polyfills.spec.ts

@@ -14,3 +14,11 @@ test.runIf(isBuild)('includes a script tag for SystemJS', async () => {
     .poll(() => page.getAttribute('#vite-legacy-entry', 'data-src'))
     .toMatch(/.\/assets\/index-legacy-(.+)\.js/)
 })
+
+test.runIf(isBuild)(
+  'does not emit modulepreload links for legacy-only output',
+  async () => {
+    await page.goto(viteTestUrl + '/no-polyfills.html')
+    expect(await page.content()).not.toContain('modulepreload')
+  },
+)