fix(browser): detect shared chunks via the optimizer (#11661)

Author: sheremet-va

packages/browser/src/node/index.ts

@@ -1,5 +1,10 @@
 import type { ServerResponse } from 'node:http'
-import type { HtmlTagDescriptor, UserConfig, UserConfig as ViteUserConfig } from 'vite'
+import type {
+  HtmlTagDescriptor,
+  UserConfig,
+  UserConfig as ViteUserConfig,
+  ViteDevServer,
+} from 'vite'
 import type {
   BrowserCommand,
   BrowserProviderOption,
@@ -15,7 +20,7 @@ import { MockerRegistry } from '@vitest/mocker'
 import { interceptorPlugin, manualMockPlugin } from '@vitest/mocker/node'
 import { distClientRoot as uiClientRoot } from '@vitest/ui'
 import { cleanUrl, toArray } from '@vitest/utils/helpers'
-import { join, resolve } from 'pathe'
+import { basename, join, resolve } from 'pathe'
 import sirv from 'sirv'
 import c from 'tinyrainbow'
 import {
@@ -56,6 +61,21 @@ export {
 
 const versionRegexp = /(?:\?|&)v=\w{8}/
 
+const optimizedChunkFiles = new WeakMap<object, Set<string>>()
+
+function isOptimizedChunk(server: ViteDevServer, url: string): boolean {
+  const chunks = server.environments.client.depsOptimizer?.metadata.chunks
+  if (!chunks) {
+    return false
+  }
+  let files = optimizedChunkFiles.get(chunks)
+  if (!files) {
+    files = new Set(Object.values(chunks).map((chunk) => basename(chunk.file)))
+    optimizedChunkFiles.set(chunks, files)
+  }
+  return files.has(basename(cleanUrl(url)))
+}
+
 // pin a Cache-Control value and stop Vite's later middleware from overriding it
 function pinCacheControl(res: ServerResponse, value: string): void {
   res.setHeader('Cache-Control', value)
@@ -276,7 +296,7 @@ body {
           // them in _some_ tests, while keeping original modules in others;
           // there is no way to configure that in Vite, so we pin no-cache
           // and ignore the cache-control Vite sets in the next middleware
-          else if (versionRegexp.test(url) && !url.includes('chunk-') && interceptsMocks()) {
+          else if (versionRegexp.test(url) && !isOptimizedChunk(server, url) && interceptsMocks()) {
             pinCacheControl(res, 'no-cache')
           }
         }

test/browser/fixtures/optimized-chunks-cache/first.test.ts

@@ -0,0 +1,5 @@
+import { expect, test } from 'vitest'
+
+test('passes', () => {
+  expect(1).toBe(1)
+})

test/browser/fixtures/optimized-chunks-cache/second.test.ts

@@ -0,0 +1,5 @@
+import { expect, test } from 'vitest'
+
+test('passes', () => {
+  expect(1).toBe(1)
+})

test/browser/fixtures/optimized-chunks-cache/vitest.config.ts

@@ -0,0 +1,14 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
+import { instances, provider } from '../../settings'
+
+export default defineConfig({
+  cacheDir: fileURLToPath(new URL('./node_modules/.vite', import.meta.url)),
+  test: {
+    browser: {
+      enabled: true,
+      provider,
+      instances,
+    },
+  },
+})

test/browser/specs/optimized-chunks-cache.test.ts

@@ -0,0 +1,66 @@
+import type { Plugin } from 'vite'
+import { basename } from 'pathe'
+import { expect, test } from 'vitest'
+import { runBrowserTests } from './utils'
+
+const versionedRequestRegexp = /[?&]v=\w{8}/
+
+function recordDependencyResponses() {
+  const responses: { kind: 'chunk' | 'entry'; cacheControl: string }[] = []
+  const plugin: Plugin = {
+    name: 'record-dependency-responses',
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        res.on('finish', () => {
+          if (!req.url || !versionedRequestRegexp.test(req.url)) {
+            return
+          }
+          const chunks = server.environments.client.depsOptimizer?.metadata.chunks ?? {}
+          const chunkFiles = new Set(Object.values(chunks).map((chunk) => basename(chunk.file)))
+          const file = basename(new URL(req.url, 'http://localhost').pathname)
+          responses.push({
+            kind: chunkFiles.has(file) ? 'chunk' : 'entry',
+            cacheControl: String(res.getHeader('cache-control')),
+          })
+        })
+        next()
+      })
+    },
+  }
+  return { plugin, responses }
+}
+
+function summarize(responses: { kind: string; cacheControl: string }[]) {
+  const summary: Record<string, string[]> = {}
+  for (const { kind, cacheControl } of responses) {
+    const values = (summary[kind] ??= [])
+    if (!values.includes(cacheControl)) {
+      values.push(cacheControl)
+    }
+  }
+  return summary
+}
+
+test('shared optimizer chunks keep immutable caching when mocks are served by request interception', async () => {
+  const { plugin, responses } = recordDependencyResponses()
+  const { stderr } = await runBrowserTests(
+    {
+      root: './fixtures/optimized-chunks-cache',
+      browser: { importMapMocks: false },
+    },
+    undefined,
+    { plugins: [plugin] },
+  )
+
+  expect(stderr).toReportNoErrors()
+  expect(summarize(responses)).toMatchInlineSnapshot(`
+    {
+      "chunk": [
+        "max-age=31536000,immutable",
+      ],
+      "entry": [
+        "no-cache",
+      ],
+    }
+  `)
+})