fix: resolve relative URL generated by renderBuiltUrl passed to mod…

…ule preload (#16084)
vitejs · Aug 15, 2024 · fac3a8e · fac3a8e
1 parent 7d8c0e2
commit fac3a8e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 23 deletions.
diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -168,29 +168,24 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
 
   const renderBuiltUrl = config.experimental.renderBuiltUrl
   const isRelativeBase = config.base === './' || config.base === ''
-  const optimizeModulePreloadRelativePaths = isRelativeBase && !renderBuiltUrl
 
   const { modulePreload } = config.build
   const scriptRel =
     modulePreload && modulePreload.polyfill
       ? `'modulepreload'`
       : `(${detectScriptRel.toString()})()`
 
-  // There are three different cases for the preload list format in __vitePreload
+  // There are two different cases for the preload list format in __vitePreload
   //
   // __vitePreload(() => import(asyncChunk), [ ...deps... ])
   //
   // This is maintained to keep backwards compatibility as some users developed plugins
   // using regex over this list to workaround the fact that module preload wasn't
   // configurable.
-  const assetsURL = renderBuiltUrl
-    ? // If `experimental.renderBuiltUrl` is used, the dependencies are already resolved.
-      // To avoid the need for `new URL(dep, import.meta.url)`, a helper `__vitePreloadRelativeDep` is
-      // used to resolve from relative paths which can be minimized.
-      `function(dep, importerUrl) { return dep[0] === '.' ? new URL(dep, importerUrl).href : dep }`
-    : optimizeModulePreloadRelativePaths
-      ? // If there isn't custom resolvers affecting the deps list, deps in the list are relative
-        // to the current chunk and are resolved to absolute URL by the __vitePreload helper itself.
+  const assetsURL =
+    renderBuiltUrl || isRelativeBase
+      ? // If `experimental.renderBuiltUrl` is used, the dependencies might be relative to the current chunk.
+        // If relative base is used, the dependencies are relative to the current chunk.
         // The importerUrl is passed as third parameter to __vitePreload in this case
         `function(dep, importerUrl) { return new URL(dep, importerUrl).href }`
       : // If the base isn't relative, then the deps are relative to the projects `outDir` and the base
@@ -347,9 +342,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
           str().appendRight(
             expEnd,
             `,${isModernFlag}?${preloadMarker}:void 0${
-              optimizeModulePreloadRelativePaths || renderBuiltUrl
-                ? ',import.meta.url'
-                : ''
+              renderBuiltUrl || isRelativeBase ? ',import.meta.url' : ''
             })`,
           )
         }
@@ -627,7 +620,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                   renderedDeps = depsArray.map((d) =>
                     // Don't include the assets dir if the default asset file names
                     // are used, the path will be reconstructed by the import preload helper
-                    optimizeModulePreloadRelativePaths
+                    isRelativeBase
                       ? addFileDep(toRelativePath(d, file))
                       : addFileDep(d),
                   )

diff --git a/playground/preload/__tests__/resolve-deps/preload-resolve-deps.spec.ts b/playground/preload/__tests__/resolve-deps/preload-resolve-deps.spec.ts
@@ -21,7 +21,9 @@ describe.runIf(isBuild)('build', () => {
     expect(html).toMatch(
       /link rel="modulepreload".*?href="http.*?\/hello-[-\w]{8}\.js"/,
     )
-    expect(html).toMatch(/link rel="modulepreload".*?href="\/preloaded.js"/)
+    expect(html).toMatch(
+      /link rel="modulepreload".*?href="http.*?\/preloaded.js"/,
+    )
     expect(html).toMatch(
       /link rel="stylesheet".*?href="http.*?\/hello-[-\w]{8}\.css"/,
     )

diff --git a/playground/preload/package.json b/playground/preload/package.json
@@ -8,14 +8,14 @@
     "build": "vite build",
     "debug": "node --inspect-brk ../../packages/vite/bin/vite",
     "preview": "vite preview",
-    "dev:resolve-deps": "vite --config vite.config-resolve-deps.ts",
-    "build:resolve-deps": "vite build --config vite.config-resolve-deps.ts",
-    "debug:resolve-deps": "node --inspect-brk ../../packages/vite/bin/vite --config vite.config-resolve-deps.ts",
-    "preview:resolve-deps": "vite preview --config vite.config-resolve-deps.ts",
-    "dev:preload-disabled": "vite --config vite.config-preload-disabled.ts",
-    "build:preload-disabled": "vite build --config vite.config-preload-disabled.ts",
-    "debug:preload-disabled": "node --inspect-brk ../../packages/vite/bin/vite --config vite.config-preload-disabled.ts",
-    "preview:preload-disabled": "vite preview --config vite.config-preload-disabled.ts"
+    "dev:resolve-deps": "vite --config vite.config-resolve-deps.js",
+    "build:resolve-deps": "vite build --config vite.config-resolve-deps.js",
+    "debug:resolve-deps": "node --inspect-brk ../../packages/vite/bin/vite --config vite.config-resolve-deps.js",
+    "preview:resolve-deps": "vite preview --config vite.config-resolve-deps.js",
+    "dev:preload-disabled": "vite --config vite.config-preload-disabled.js",
+    "build:preload-disabled": "vite build --config vite.config-preload-disabled.js",
+    "debug:preload-disabled": "node --inspect-brk ../../packages/vite/bin/vite --config vite.config-preload-disabled.js",
+    "preview:preload-disabled": "vite preview --config vite.config-preload-disabled.js"
   },
   "devDependencies": {
     "terser": "^5.31.5",