fix(assets): make timestamp invalidation lazy (#14675)

Author: bluwy

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

@@ -20,12 +20,14 @@ import type { ResolvedConfig } from '../config'
 import {
   cleanUrl,
   getHash,
+  injectQuery,
   joinUrlSegments,
   normalizePath,
   removeLeadingSlash,
   withTrailingSlash,
 } from '../utils'
 import { FS_PREFIX } from '../constants'
+import type { ModuleGraph } from '../server/moduleGraph'
 
 // referenceId is base64url but replaces - with $
 export const assetUrlRE = /__VITE_ASSET__([\w$]+)__(?:\$_(.*?)__)?/g
@@ -144,6 +146,8 @@ const viteBuildPublicIdPrefix = '\0vite:asset:public'
 export function assetPlugin(config: ResolvedConfig): Plugin {
   registerCustomMime()
 
+  let moduleGraph: ModuleGraph | undefined
+
   return {
     name: 'vite:asset',
 
@@ -152,6 +156,10 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
       generatedAssets.set(config, new Map())
     },
 
+    configureServer(server) {
+      moduleGraph = server.moduleGraph
+    },
+
     resolveId(id) {
       if (!config.assetsInclude(cleanUrl(id)) && !urlRE.test(id)) {
         return
@@ -192,10 +200,17 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
       }
 
       id = id.replace(urlRE, '$1').replace(unnededFinalQueryCharRE, '')
-      const url = await fileToUrl(id, config, this)
-      return `export default ${JSON.stringify(
-        config.command === 'serve' ? `${url}?t=${Date.now()}` : url,
-      )}`
+      let url = await fileToUrl(id, config, this)
+
+      // Inherit HMR timestamp if this asset was invalidated
+      if (moduleGraph) {
+        const mod = moduleGraph.getModuleById(id)
+        if (mod && mod.lastHMRTimestamp > 0) {
+          url = injectQuery(url, `t=${mod.lastHMRTimestamp}`)
+        }
+      }
+
+      return `export default ${JSON.stringify(url)}`
     },
 
     renderChunk(code, chunk, opts) {

playground/assets/__tests__/assets.spec.ts

@@ -293,9 +293,7 @@ describe('svg fragments', () => {
 
   test('from js import', async () => {
     const img = await page.$('.svg-frag-import')
-    expect(await img.getAttribute('src')).toMatch(
-      isBuild ? /svg#icon-heart-view$/ : /svg\?t=\d+#icon-heart-view$/,
-    )
+    expect(await img.getAttribute('src')).toMatch(/svg#icon-heart-view$/)
   })
 })
 
@@ -323,11 +321,11 @@ test('?url import', async () => {
 test('?url import on css', async () => {
   const src = readFile('css/icons.css')
   const txt = await page.textContent('.url-css')
-  isBuild
-    ? expect(txt).toEqual(
-        `data:text/css;base64,${Buffer.from(src).toString('base64')}`,
-      )
-    : expect(txt).toMatch(/^\/foo\/bar\/css\/icons.css\?t=\d+$/)
+  expect(txt).toEqual(
+    isBuild
+      ? `data:text/css;base64,${Buffer.from(src).toString('base64')}`
+      : '/foo/bar/css/icons.css',
+  )
 })
 
 describe('unicode url', () => {

playground/assets/__tests__/relative-base/relative-base-assets.spec.ts

@@ -179,9 +179,7 @@ describe('svg fragments', () => {
 
   test('from js import', async () => {
     const img = await page.$('.svg-frag-import')
-    expect(await img.getAttribute('src')).toMatch(
-      isBuild ? /svg#icon-heart-view$/ : /svg\?t=\d+#icon-heart-view$/,
-    )
+    expect(await img.getAttribute('src')).toMatch(/svg#icon-heart-view$/)
   })
 })
 

playground/assets/__tests__/runtime-base/runtime-base-assets.spec.ts

@@ -179,9 +179,7 @@ describe('svg fragments', () => {
 
   test('from js import', async () => {
     const img = await page.$('.svg-frag-import')
-    expect(await img.getAttribute('src')).toMatch(
-      isBuild ? /svg#icon-heart-view$/ : /svg\?t=\d+#icon-heart-view$/,
-    )
+    expect(await img.getAttribute('src')).toMatch(/svg#icon-heart-view$/)
   })
 })
 

playground/assets/__tests__/url-base/url-base-assets.spec.ts

@@ -173,9 +173,7 @@ describe('svg fragments', () => {
 
   test('from js import', async () => {
     const img = await page.$('.svg-frag-import')
-    expect(await img.getAttribute('src')).toMatch(
-      isBuild ? /svg#icon-heart-view$/ : /svg\?t=\d+#icon-heart-view$/,
-    )
+    expect(await img.getAttribute('src')).toMatch(/svg#icon-heart-view$/)
   })
 })