fix: avoid module preload polyfill for zero js html

packages/playground/html/__tests__/html.spec.ts

@@ -104,6 +104,7 @@ if (isBuild) {
 
     test('script is async', async () => {
       expect(await page.$('head script[type=module][async]')).toBeTruthy()
+      expect(await page.$('head script[type=module]:not([async])')).toBeNull()
     })
   })
 
@@ -115,6 +116,20 @@ if (isBuild) {
 
     test('script is mixed', async () => {
       expect(await page.$('head script[type=module][async]')).toBeNull()
+      expect(await page.$('head script[type=module]:not([async])')).toBeTruthy()
+    })
+  })
+
+  describe('zeroJS', () => {
+    // Ensure that the modulePreload polyfill is discarded in this case
+
+    beforeAll(async () => {
+      // viteTestUrl is globally injected in scripts/jestPerTestSetup.ts
+      await page.goto(viteTestUrl + '/zeroJS.html')
+    })
+
+    test('zeroJS', async () => {
+      expect(await page.$('head script[type=module]')).toBeNull()
     })
   })
 

packages/playground/html/vite.config.js

@@ -11,6 +11,7 @@ module.exports = {
         nested: resolve(__dirname, 'nested/index.html'),
         scriptAsync: resolve(__dirname, 'scriptAsync.html'),
         scriptMixed: resolve(__dirname, 'scriptMixed.html'),
+        zeroJS: resolve(__dirname, 'zeroJS.html'),
         inline1: resolve(__dirname, 'inline/shared-1.html'),
         inline2: resolve(__dirname, 'inline/shared-2.html'),
         inline3: resolve(__dirname, 'inline/unique.html')

packages/playground/html/zeroJS.html

@@ -0,0 +1,9 @@
+<link rel="stylesheet" href="/main.css" />
+
+<h1>zeroJS.html</h1>
+
+<style>
+  body {
+    background-color: linen;
+  }
+</style>

packages/vite/src/node/plugins/html.ts

@@ -293,8 +293,11 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
 
         processedHtml.set(id, s.toString())
 
-        // inject module preload polyfill
-        if (config.build.polyfillModulePreload) {
+        // inject module preload polyfill only when configured and needed
+        if (
+          config.build.polyfillModulePreload &&
+          (someScriptsAreAsync || someScriptsAreDefer)
+        ) {
           js = `import "${modulePreloadPolyfillId}";\n${js}`
         }
 
@@ -391,6 +394,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
             chunk.isEntry &&
             chunk.facadeModuleId === id
         ) as OutputChunk | undefined
+
         let canInlineEntry = false
 
         // inject chunk asset links
@@ -405,6 +409,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           // when not inlined, inject <script> for entry and modulepreload its dependencies
           // when inlined, discard entry chunk and inject <script> for everything in post-order
           const imports = getImportedChunks(chunk)
+
           const assetTags = canInlineEntry
             ? imports.map((chunk) => toScriptTag(chunk, isAsync))
             : [toScriptTag(chunk, isAsync), ...imports.map(toPreloadTag)]