feat(legacy): build file name optimization

packages/plugin-legacy/src/index.ts

@@ -324,31 +324,23 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
           | string
           | ((chunkInfo: PreRenderedChunk) => string)
           | undefined,
-        defaultFileName = '[name]-legacy-[hash].js',
+        defaultFileName = '[name]-[hash]-legacy.js',
       ): string | ((chunkInfo: PreRenderedChunk) => string) => {
         if (!fileNames) {
           return path.posix.join(config.build.assetsDir, defaultFileName)
         }
 
         return (chunkInfo) => {
-          let fileName =
+          const fileName =
             typeof fileNames === 'function' ? fileNames(chunkInfo) : fileNames
 
-          if (fileName.includes('[name]')) {
-            // [name]-[hash].[format] -> [name]-legacy-[hash].[format]
-            fileName = fileName.replace('[name]', '[name]-legacy')
-          } else if (fileName.includes('[hash]')) {
-            // custom[hash].[format] -> [name]-legacy[hash].[format]
-            // custom-[hash].[format] -> [name]-legacy-[hash].[format]
-            // custom.[hash].[format] -> [name]-legacy.[hash].[format]
-            fileName = fileName.replace(/[.-]?\[hash\]/, '-legacy$&')
-          } else {
-            // entry.js -> entry-legacy.js
-            // entry.min.js -> entry-legacy.min.js
-            fileName = fileName.replace(/(.+?)\.(.+)/, '$1-legacy.$2')
-          }
-
-          return fileName
+          // [name]-[hash].[format] -> [name]-[hash]-legacy.[format]
+          // [hash].[format] -> [hash]-legacy.[format]
+          // custom[hash].[format] -> custom[hash]-legacy.[format]
+          // custom-[hash].[format] -> custom-[hash]-legacy.[format]
+          // custom.[hash].[format] -> custom.[hash]-legacy.[format]
+          // [hash].min.[format] -> [hash]-legacy.min.[format]
+          return fileName.replace(/(\.min\.|\.)[^.]*$/, '-legacy$&')
         }
       }
 

playground/legacy/__tests__/legacy.spec.ts

@@ -98,13 +98,13 @@ describe.runIf(isBuild)('build', () => {
       '../../vite/legacy-polyfills-legacy',
     )
     expect(manifest['custom0-legacy.js'].file).toMatch(
-      /chunk-X-legacy\.[-\w]{8}.js/,
+      /chunk-X\.[-\w]{8}-legacy\.js/,
     )
     expect(manifest['custom1-legacy.js'].file).toMatch(
-      /chunk-X-legacy-[-\w]{8}.js/,
+      /chunk-X-[-\w]{8}-legacy\.js/,
     )
     expect(manifest['custom2-legacy.js'].file).toMatch(
-      /chunk-X-legacy[-\w]{8}.js/,
+      /chunk-X[-\w]{8}-legacy\.js/,
     )
     // modern polyfill
     expect(manifest['../../vite/legacy-polyfills']).toBeDefined()
@@ -119,15 +119,19 @@ describe.runIf(isBuild)('build', () => {
     // esbuild-minified) does not!
     const terserPattern = /^(?:!function|System.register)/
 
-    expect(findAssetFile(/chunk-async-legacy/)).toMatch(terserPattern)
-    expect(findAssetFile(/chunk-async(?!-legacy)/)).not.toMatch(terserPattern)
+    expect(findAssetFile(/chunk-async\.[-\w]{8}-legacy/)).toMatch(terserPattern)
+    expect(findAssetFile(/chunk-async\.[-\w]{8}(?!-legacy)/)).not.toMatch(
+      terserPattern,
+    )
     expect(findAssetFile(/immutable-chunk-legacy/)).toMatch(terserPattern)
     expect(findAssetFile(/immutable-chunk(?!-legacy)/)).not.toMatch(
       terserPattern,
     )
-    expect(findAssetFile(/index-legacy/)).toMatch(terserPattern)
-    expect(findAssetFile(/index(?!-legacy)/)).not.toMatch(terserPattern)
-    expect(findAssetFile(/polyfills-legacy/)).toMatch(terserPattern)
+    expect(findAssetFile(/index-[-\w]{8}-legacy/)).toMatch(terserPattern)
+    expect(findAssetFile(/index-[-\w]{8}(?!-legacy)/)).not.toMatch(
+      terserPattern,
+    )
+    expect(findAssetFile(/polyfills-[-\w]{8}-legacy/)).toMatch(terserPattern)
   })
 
   test('should emit css file', async () => {
@@ -137,13 +141,17 @@ describe.runIf(isBuild)('build', () => {
   })
 
   test('includes structuredClone polyfill which is supported after core-js v3', () => {
-    expect(findAssetFile(/polyfills-legacy/)).toMatch('"structuredClone"')
+    expect(findAssetFile(/polyfills-[-\w]{8}-legacy/)).toMatch(
+      '"structuredClone"',
+    )
     expect(findAssetFile(/polyfills-[-\w]{8}\./)).toMatch('"structuredClone"')
   })
 
   test('should generate legacy sourcemap file', async () => {
     expect(
-      listAssets().some((filename) => /index-legacy.+\.map$/.test(filename)),
+      listAssets().some((filename) =>
+        /index-[-\w]{8}-legacy.+\.map$/.test(filename),
+      ),
     ).toBeTruthy()
     expect(
       listAssets().some((filename) =>
@@ -154,8 +162,8 @@ describe.runIf(isBuild)('build', () => {
 
   test('should have only modern entry files guarded', async () => {
     const guard = /(import\s*\()|(import.meta)|(async\s*function\*)/
-    expect(findAssetFile(/index(?!-legacy)/)).toMatch(guard)
-    expect(findAssetFile(/polyfills(?!-legacy)/)).toMatch(guard)
+    expect(findAssetFile(/index-[-\w]{8}(?!-legacy)/)).toMatch(guard)
+    expect(findAssetFile(/polyfills-[-\w]{8}(?!-legacy)/)).toMatch(guard)
 
     expect(findAssetFile(/chunk-async(?!-legacy)/)).not.toMatch(guard)
     expect(findAssetFile(/index-legacy/)).not.toMatch(guard)

playground/legacy/__tests__/no-polyfills-no-systemjs/no-polyfills-no-systemjs.spec.ts

@@ -6,7 +6,7 @@ test.runIf(isBuild)('includes only a single script tag', async () => {
 
   await untilUpdated(
     () => page.getAttribute('#vite-legacy-entry', 'data-src'),
-    /.\/assets\/index-legacy-(.+)\.js/,
+    /.\/assets\/index-[-\w]{8}-legacy\.js/,
     true,
   )
 

playground/legacy/__tests__/no-polyfills/no-polyfills.spec.ts

@@ -9,12 +9,12 @@ test('should load and execute the JS file', async () => {
 test.runIf(isBuild)('includes a script tag for SystemJS', async () => {
   await untilUpdated(
     () => page.getAttribute('#vite-legacy-polyfill', 'src'),
-    /.\/assets\/polyfills-legacy-(.+)\.js/,
+    /.\/assets\/polyfills-[-\w]{8}-legacy\.js/,
     true,
   )
   await untilUpdated(
     () => page.getAttribute('#vite-legacy-entry', 'data-src'),
-    /.\/assets\/index-legacy-(.+)\.js/,
+    /.\/assets\/index-[-\w]{8}-legacy\.js/,
     true,
   )
 })

playground/legacy/__tests__/watch/styles-only-entry-watch.spec.ts

@@ -12,10 +12,10 @@ test.runIf(isBuild)('rebuilds styles only entry on change', async () => {
   expect(findAssetFile(/style-only-entry-.+\.css/, 'watch')).toContain(
     'hotpink',
   )
-  expect(findAssetFile(/style-only-entry-legacy-.+\.js/, 'watch')).toContain(
-    'hotpink',
-  )
-  expect(findAssetFile(/polyfills-legacy-.+\.js/, 'watch')).toBeTruthy()
+  expect(
+    findAssetFile(/style-only-entry-[-\w]{8}-legacy\.js/, 'watch'),
+  ).toContain('hotpink')
+  expect(findAssetFile(/polyfills-[-\w]{8}-legacy\.js/, 'watch')).toBeTruthy()
   const numberOfManifestEntries = Object.keys(readManifest('watch')).length
   expect(numberOfManifestEntries).toBe(3)
 
@@ -43,5 +43,5 @@ test.runIf(isBuild)('rebuilds styles only entry on change', async () => {
     'watch',
   )
   expect(reRenderedCssLegacyFile).toContain('lightpink')
-  expect(findAssetFile(/polyfills-legacy-.+\.js/, 'watch')).toBeTruthy()
+  expect(findAssetFile(/polyfills-[-\w]{8}-legacy\.js/, 'watch')).toBeTruthy()
 })