feat(worker): show asset filename conflict warning (#19591)

Author: sapphi-red

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

@@ -1,6 +1,7 @@
 import path from 'node:path'
 import MagicString from 'magic-string'
 import type { OutputChunk, RollupError } from 'rollup'
+import colors from 'picocolors'
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
 import { ENV_ENTRY, ENV_PUBLIC_PATH } from '../constants'
@@ -56,6 +57,17 @@ function saveEmitWorkerAsset(
   asset: WorkerBundleAsset,
 ): void {
   const workerMap = workerCache.get(config.mainConfig || config)!
+  const duplicateAsset = workerMap.assets.get(asset.fileName)
+  if (duplicateAsset) {
+    if (!isSameContent(duplicateAsset.source, asset.source)) {
+      config.logger.warn(
+        `\n` +
+          colors.yellow(
+            `The emitted file ${JSON.stringify(asset.fileName)} overwrites a previously emitted file of the same name.`,
+          ),
+      )
+    }
+  }
   workerMap.assets.set(asset.fileName, asset)
 }
 

playground/worker/__tests__/es/worker-es.spec.ts

@@ -12,7 +12,7 @@ test('normal', async () => {
   )
   await untilUpdated(
     () => page.textContent('.asset-url'),
-    isBuild ? '/es/assets/worker_asset-vite.svg' : '/es/vite.svg',
+    isBuild ? /\/es\/assets\/worker_asset-vite-[\w-]{8}\.svg/ : '/es/vite.svg',
   )
   await untilUpdated(() => page.textContent('.dep-cjs'), '[cjs ok]')
 })
@@ -94,7 +94,7 @@ describe.runIf(isBuild)('build', () => {
   test('inlined code generation', async () => {
     const assetsDir = path.resolve(testDir, 'dist/es/assets')
     const files = fs.readdirSync(assetsDir)
-    expect(files.length).toBe(35)
+    expect(files.length).toBe(36)
     const index = files.find((f) => f.includes('main-module'))
     const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
     const worker = files.find((f) => f.includes('my-worker'))

playground/worker/__tests__/iife/worker-iife.spec.ts

@@ -21,7 +21,9 @@ test('normal', async () => {
   )
   await untilUpdated(
     () => page.textContent('.asset-url'),
-    isBuild ? '/iife/assets/worker_asset-vite.svg' : '/iife/vite.svg',
+    isBuild
+      ? /\/iife\/assets\/worker_asset-vite-[\w-]{8}\.svg/
+      : '/iife/vite.svg',
   )
 })
 

playground/worker/vite.config-es.js

@@ -13,8 +13,8 @@ export default defineConfig({
     plugins: () => [workerPluginTestPlugin()],
     rollupOptions: {
       output: {
-        assetFileNames: 'assets/worker_asset-[name].[ext]',
-        chunkFileNames: 'assets/worker_chunk-[name].js',
+        assetFileNames: 'assets/worker_asset-[name]-[hash].[ext]',
+        chunkFileNames: 'assets/worker_chunk-[name]-[hash].js',
         entryFileNames: 'assets/worker_entry-[name].js',
       },
     },
@@ -25,8 +25,8 @@ export default defineConfig({
       filePath.endsWith('.svg') ? false : undefined,
     rollupOptions: {
       output: {
-        assetFileNames: 'assets/[name].[ext]',
-        chunkFileNames: 'assets/[name].js',
+        assetFileNames: 'assets/[name]-[hash].[ext]',
+        chunkFileNames: 'assets/[name]-[hash].js',
         entryFileNames: 'assets/[name].js',
       },
     },

playground/worker/vite.config-iife.js

@@ -13,8 +13,8 @@ export default defineConfig({
     plugins: () => [workerPluginTestPlugin()],
     rollupOptions: {
       output: {
-        assetFileNames: 'assets/worker_asset-[name].[ext]',
-        chunkFileNames: 'assets/worker_chunk-[name].js',
+        assetFileNames: 'assets/worker_asset-[name]-[hash].[ext]',
+        chunkFileNames: 'assets/worker_chunk-[name]-[hash].js',
         // should be overwritten to worker_entry-[name] by the config-test plugin
         entryFileNames: 'assets/worker_-[name].js',
       },
@@ -27,8 +27,8 @@ export default defineConfig({
     manifest: true,
     rollupOptions: {
       output: {
-        assetFileNames: 'assets/[name].[ext]',
-        chunkFileNames: 'assets/[name].js',
+        assetFileNames: 'assets/[name]-[hash].[ext]',
+        chunkFileNames: 'assets/[name]-[hash].js',
         entryFileNames: 'assets/[name].js',
       },
     },