fix(html): respect disable modulepreload (#12111)

Author: bluwy

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

@@ -737,23 +737,25 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               toScriptTag(chunk, toOutputAssetFilePath, isAsync),
             )
           } else {
+            assetTags = [toScriptTag(chunk, toOutputAssetFilePath, isAsync)]
             const { modulePreload } = config.build
-            const resolveDependencies =
-              typeof modulePreload === 'object' &&
-              modulePreload.resolveDependencies
-            const importsFileNames = imports.map((chunk) => chunk.fileName)
-            const resolvedDeps = resolveDependencies
-              ? resolveDependencies(chunk.fileName, importsFileNames, {
-                  hostId: relativeUrlPath,
-                  hostType: 'html',
-                })
-              : importsFileNames
-            assetTags = [
-              toScriptTag(chunk, toOutputAssetFilePath, isAsync),
-              ...resolvedDeps.map((i) =>
-                toPreloadTag(i, toOutputAssetFilePath),
-              ),
-            ]
+            if (modulePreload !== false) {
+              const resolveDependencies =
+                typeof modulePreload === 'object' &&
+                modulePreload.resolveDependencies
+              const importsFileNames = imports.map((chunk) => chunk.fileName)
+              const resolvedDeps = resolveDependencies
+                ? resolveDependencies(chunk.fileName, importsFileNames, {
+                    hostId: relativeUrlPath,
+                    hostType: 'html',
+                  })
+                : importsFileNames
+              assetTags.push(
+                ...resolvedDeps.map((i) =>
+                  toPreloadTag(i, toOutputAssetFilePath),
+                ),
+              )
+            }
           }
           assetTags.push(...getCssTagsForChunk(chunk, toOutputAssetFilePath))
 

playground/preload/index.html

@@ -1,4 +1,5 @@
 <h1>preload</h1>
+<div class="chunk"></div>
 <div id="hello">
   <button class="load">Load hello</button>
   <div class="msg"></div>

playground/preload/src/chunk.js

@@ -0,0 +1 @@
+export default '[success] message from chunk.js'

playground/preload/src/main.js

@@ -1,3 +1,7 @@
+import chunkMsg from './chunk'
+
+document.querySelector('.chunk').textContent = chunkMsg
+
 const ids = {
   hello: async () => {
     await import(/* a comment */ './hello.js')

playground/preload/vite.config-preload-disabled.ts

@@ -12,6 +12,15 @@ export default defineConfig({
         passes: 3,
       },
     },
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('chunk.js')) {
+            return 'chunk'
+          }
+        },
+      },
+    },
     modulePreload: false,
   },
 })

playground/preload/vite.config-resolve-deps.ts

@@ -12,6 +12,15 @@ export default defineConfig({
         passes: 3,
       },
     },
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('chunk.js')) {
+            return 'chunk'
+          }
+        },
+      },
+    },
     modulePreload: {
       resolveDependencies(filename, deps, { hostId, hostType }) {
         if (filename.includes('hello')) {

playground/preload/vite.config.ts

@@ -12,5 +12,14 @@ export default defineConfig({
         passes: 3,
       },
     },
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('chunk.js')) {
+            return 'chunk'
+          }
+        },
+      },
+    },
   },
 })