From 94b3713011918a45912fd0324516b7537009da71 Mon Sep 17 00:00:00 2001 From: sapphi-red <49056869+sapphi-red@users.noreply.github.com> Date: Mon, 4 Mar 2024 00:08:57 +0900 Subject: [PATCH 1/3] fix: resolve relative URL generated by `renderBuiltUrl` passed to module preload --- .../vite/src/node/plugins/importAnalysisBuild.ts | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index 1d7a2d6121a42c..851d455f8fe2e6 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -176,21 +176,17 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { ? `'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 || optimizeModulePreloadRelativePaths + ? // 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 From ec82e19fe6df98c69f042dd433ec33f6564d96ab Mon Sep 17 00:00:00 2001 From: sapphi-red <49056869+sapphi-red@users.noreply.github.com> Date: Mon, 4 Mar 2024 00:36:37 +0900 Subject: [PATCH 2/3] test: update --- .../resolve-deps/preload-resolve-deps.spec.ts | 4 +++- playground/preload/package.json | 16 ++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/playground/preload/__tests__/resolve-deps/preload-resolve-deps.spec.ts b/playground/preload/__tests__/resolve-deps/preload-resolve-deps.spec.ts index 02f20ef837e242..41a61460807c1f 100644 --- 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 index 3d91a5c96cb766..aaf81787981e72 100644 --- 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.3", From 3b29bd86f385d8dad2918f588639f4a9d226fac2 Mon Sep 17 00:00:00 2001 From: sapphi-red <49056869+sapphi-red@users.noreply.github.com> Date: Thu, 15 Aug 2024 17:51:17 +0900 Subject: [PATCH 3/3] refactor: replace `optimizeModulePreloadRelativePaths` with `isRelativeBase` --- packages/vite/src/node/plugins/importAnalysisBuild.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index 851d455f8fe2e6..f02f2119ebdbf3 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -168,7 +168,6 @@ 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 = @@ -184,7 +183,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { // using regex over this list to workaround the fact that module preload wasn't // configurable. const assetsURL = - renderBuiltUrl || optimizeModulePreloadRelativePaths + 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 @@ -343,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' : '' })`, ) } @@ -623,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), )