fix: use id hash for preload deps

vitejs · Jan 18, 2024 · 2a3ff35 · 2a3ff35
1 parent 33b6f4a
commit 2a3ff35
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -72,6 +72,7 @@ function detectScriptRel() {
 
 declare const scriptRel: string
 declare const seen: Record<string, boolean>
+declare const chunkFilePairs: [string, string][]
 function preload(
  baseModule: () => Promise<{}>,
  deps?: string[],
@@ -88,6 +89,9 @@ function preload(
  dep = assetsURL(dep, importerUrl)
  if (dep in seen) return
  seen[dep] = true
+ chunkFilePairs.forEach(([k, v]) => {
+ dep = dep.replace(k, v)
+ })
  const isCss = dep.endsWith('.css')
  const cssSelector = isCss ? '[rel="stylesheet"]' : ''
  const isBaseRelative = !!importerUrl
@@ -187,7 +191,21 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
  : // If the base isn't relative, then the deps are relative to the projects `outDir` and the base
  // is appended inside __vitePreload too.
  `function(dep) { return ${JSON.stringify(config.base)}+dep }`
- const preloadCode = `const scriptRel = ${scriptRel};const assetsURL = ${assetsURL};const seen = {};export const ${preloadMethod} = ${preload.toString()}`
+ const chunkFilePairs = () => {
+ const importMapString = document.querySelector('script[type="importmap"]')
+ ?.textContent
+ const importMap: Record<string, string> = importMapString
+ ? JSON.parse(importMapString).imports
+ : {}
+ return Object.entries(importMap)
+ .map(([k, v]) => {
+ const key = k.match(/[^/]+\.js$/)
+ const value = v.match(/[^/]+\.js$/)
+ return key && value ? [key[0], value[0]] : null
+ })
+ .filter(Boolean) as [string, string][]
+ }
+ const preloadCode = `const scriptRel = ${scriptRel};const assetsURL = ${assetsURL};const seen = {};const chunkFilePairs = (${chunkFilePairs.toString()})();export const ${preloadMethod} = ${preload.toString()}`
 
  return {
  name: 'vite:build-import-analysis',
@@ -306,6 +324,13 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
  }
 
  const chunkMap = createChunkMap(bundle)
+ const reverseChunkFilePairs = Object.entries(chunkMap)
+ .map(([k, v]) => {
+ const key = k.match(/[^/]+\.js$/)
+ const value = v.match(/[^/]+\.js$/)
+ return key && value ? [value[0], key[0]] : null
+ })
+ .filter(Boolean) as [string, string][]
 
  for (const file in bundle) {
  const chunk = bundle[file]
@@ -499,9 +524,13 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
  }
 
  const fileDepsCode = `[${fileDeps
- .map((fileDep) =>
- fileDep.runtime ? fileDep.url : JSON.stringify(fileDep.url),
- )
+ .map((fileDep) => {
+ let url = fileDep.url
+ reverseChunkFilePairs.forEach(([v, k]) => {
+ url = url.replace(v, k)
+ })
+ return fileDep.runtime ? url : JSON.stringify(url)
+ })
  .join(',')}]`
 
  const mapDepsCode = `\

diff --git a/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts b/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts
@@ -137,7 +137,7 @@ describe.runIf(isBuild)('build tests', () => {
  const map = findAssetFile(/after-preload-dynamic.*\.js\.map/)
  expect(formatSourcemapForSnapshot(JSON.parse(map))).toMatchInlineSnapshot(`
  {
- "mappings": "i3BAAA,OAAO,2BAAuB,EAAC,wBAE/B,QAAQ,IAAI,uBAAuB",
+ "mappings": "qpCAAA,OAAO,2BAAuB,EAAC,wBAE/B,QAAQ,IAAI,uBAAuB",
  "sources": [
  "../../after-preload-dynamic.js",
  ],