fix: revert production js chunk names (#8012)

packages/config/src/config/build.js

@@ -14,8 +14,8 @@ export default () => ({
   serverURLPolyfill: 'url',
   filenames: {
     // { isDev, isClient, isServer }
-    app: ({ isDev, isModern }) => isDev ? `[name]${isModern ? '.modern' : ''}.js` : `[name].[contenthash:7]${isModern ? '.modern' : ''}.js`,
+    app: ({ isDev, isModern }) => isDev ? `[name]${isModern ? '.modern' : ''}.js` : `[contenthash:7]${isModern ? '.modern' : ''}.js`,
-    chunk: ({ isDev, isModern }) => isDev ? `[name]${isModern ? '.modern' : ''}.js` : `[name].[contenthash:7]${isModern ? '.modern' : ''}.js`,
+    chunk: ({ isDev, isModern }) => isDev ? `[name]${isModern ? '.modern' : ''}.js` : `[contenthash:7]${isModern ? '.modern' : ''}.js`,
     css: ({ isDev }) => isDev ? '[name].css' : '[name].[contenthash:7].css',
     img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[name].[contenthash:7].[ext]',
     font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[name].[contenthash:7].[ext]',

packages/config/test/config/build.test.js

@@ -15,8 +15,8 @@ describe('config: build', () => {
   test('should return prod filenames', () => {
     const { filenames } = buildConfig()
     const env = { isDev: false }
-    expect(filenames.app(env)).toEqual('[name].[contenthash:7].js')
+    expect(filenames.app(env)).toEqual('[contenthash:7].js')
-    expect(filenames.chunk(env)).toEqual('[name].[contenthash:7].js')
+    expect(filenames.chunk(env)).toEqual('[contenthash:7].js')
     expect(filenames.css(env)).toEqual('[name].[contenthash:7].css')
     expect(filenames.img(env)).toEqual('img/[name].[contenthash:7].[ext]')
     expect(filenames.font(env)).toEqual('fonts/[name].[contenthash:7].[ext]')

packages/webpack/src/config/base.js

@@ -167,6 +167,9 @@ export default class WebpackBaseConfig {
         consola.warn(`Notice: Please do not use ${hash[1]} in dev mode to prevent memory leak`)
       }
     }
+    if (this.buildContext.buildOptions.analyze && !fileName.includes('[name]')) {
+      fileName = '[name].' + fileName
+    }
     return fileName
   }
 

packages/webpack/src/config/client.js

@@ -5,7 +5,6 @@ import HTMLPlugin from 'html-webpack-plugin'
 import BundleAnalyzer from 'webpack-bundle-analyzer'
 import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin'
 import FriendlyErrorsWebpackPlugin from '@nuxt/friendly-errors-webpack-plugin'
-import hash from 'hash-sum'
 
 import CorsPlugin from '../plugins/vue/cors'
 import ModernModePlugin from '../plugins/vue/modern'
@@ -66,47 +65,11 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
       cacheGroups.commons = {
         test: /node_modules[\\/](vue|vue-loader|vue-router|vuex|vue-meta|core-js|@babel\/runtime|axios|webpack|setimmediate|timers-browserify|process|regenerator-runtime|cookie|js-cookie|is-buffer|dotprop|nuxt\.js)[\\/]/,
         chunks: 'all',
-        name: 'vendors/commons',
+        name: true,
         priority: 10
       }
     }
 
-    if (!this.dev && splitChunks.name === undefined) {
-      const nameMap = { default: 'commons' }
-      splitChunks.name = (_module, chunks, cacheGroup) => {
-        // Map chunks to names
-        const names = chunks
-          .map(c => c.name || '')
-          .map(name => name
-            .replace(/[/\\]/g, '.')
-            .replace(/_/g, '')
-            .replace('pages.', '')
-          )
-          .filter(Boolean)
-          .sort()
-
-        // Fallback to webpack chunk name or generated cache group key
-        if (names.length < 2) {
-          return chunks[0].name
-        }
-
-        // Use compact name for concatinated modules
-        let compactName = names.join('~')
-        if (compactName.length > 32) {
-          compactName = hash(compactName)
-        }
-        const prefix = nameMap[cacheGroup || 'default'] || cacheGroup
-        return prefix + '/' + compactName
-      }
-
-      // Enforce name for all groups
-      for (const group of Object.values(cacheGroups)) {
-        if (group.name === undefined) {
-          group.name = true
-        }
-      }
-    }
-
     return optimization
   }
 

test/dev/modern.client.test.js

@@ -16,26 +16,26 @@ describe('modern client mode (SSR)', () => {
   test('should contain nomodule legacy resources', async () => {
     const { body: response } = await rp(url('/'))
     expect(response).toContain('script nomodule crossorigin="use-credentials" src="/_nuxt/app.js')
-    expect(response).toContain('script nomodule crossorigin="use-credentials" src="/_nuxt/vendors/commons.js')
+    expect(response).toContain('script nomodule crossorigin="use-credentials" src="/_nuxt/commons/app.js')
   })
 
   test('should contain module modern resources', async () => {
     const { body: response } = await rp(url('/'))
     expect(response).toContain('<script type="module" crossorigin="use-credentials" src="/_nuxt/app.modern.js"')
-    expect(response).toContain('<script type="module" crossorigin="use-credentials" src="/_nuxt/vendors/commons.modern.js"')
+    expect(response).toContain('<script type="module" crossorigin="use-credentials" src="/_nuxt/commons/app.modern.js"')
   })
 
   test('should contain module preload resources', async () => {
     const { body: response } = await rp(url('/'))
     expect(response).toContain('<link rel="modulepreload" crossorigin="use-credentials" href="/_nuxt/app.modern.js" as="script">')
-    expect(response).toContain('<link rel="modulepreload" crossorigin="use-credentials" href="/_nuxt/vendors/commons.modern.js" as="script">')
+    expect(response).toContain('<link rel="modulepreload" crossorigin="use-credentials" href="/_nuxt/commons/app.modern.js" as="script">')
   })
 
   test('should contain module http2 pushed resources', async () => {
     const { headers: { link } } = await rp(url('/'))
     expect(link).toEqual([
       '</_nuxt/runtime.modern.js>; rel=modulepreload; crossorigin=use-credentials; as=script',
-      '</_nuxt/vendors/commons.modern.js>; rel=modulepreload; crossorigin=use-credentials; as=script',
+      '</_nuxt/commons/app.modern.js>; rel=modulepreload; crossorigin=use-credentials; as=script',
       '</_nuxt/app.modern.js>; rel=modulepreload; crossorigin=use-credentials; as=script',
       `</_nuxt/pages/index.modern.js>; rel=modulepreload; crossorigin=use-credentials; as=script`
     ].join(', '))

test/dev/modern.server.test.js

@@ -24,13 +24,13 @@ describe('modern server mode', () => {
   test('should use legacy resources by default', async () => {
     const { body: response } = await rp(url('/'))
     expect(response).toContain('/_nuxt/app.js')
-    expect(response).toContain('/_nuxt/vendors/commons.js')
+    expect(response).toContain('/_nuxt/commons/app.js')
   })
 
   test('should use modern resources for modern resources', async () => {
     const { body: response } = await rp(url('/'), { headers: { 'user-agent': modernUA } })
     expect(response).toContain('/_nuxt/app.modern.js')
-    expect(response).toContain('/_nuxt/vendors/commons.modern.js')
+    expect(response).toContain('/_nuxt/commons/app.modern.js')
   })
 
   test('should include es6 syntax in modern resources', async () => {
@@ -47,7 +47,7 @@ describe('modern server mode', () => {
     const { headers: { link } } = await rp(url('/'))
     expect(link).toEqual([
       '</_nuxt/runtime.js>; rel=preload; crossorigin=use-credentials; as=script',
-      '</_nuxt/vendors/commons.js>; rel=preload; crossorigin=use-credentials; as=script',
+      '</_nuxt/commons/app.js>; rel=preload; crossorigin=use-credentials; as=script',
       '</_nuxt/app.js>; rel=preload; crossorigin=use-credentials; as=script',
       `</_nuxt/${wChunk('pages/index.js')}>; rel=preload; crossorigin=use-credentials; as=script`
     ].join(', '))
@@ -59,7 +59,7 @@ describe('modern server mode', () => {
     })
     expect(link).toEqual([
       '</_nuxt/runtime.modern.js>; rel=preload; crossorigin=use-credentials; as=script',
-      '</_nuxt/vendors/commons.modern.js>; rel=preload; crossorigin=use-credentials; as=script',
+      '</_nuxt/commons/app.modern.js>; rel=preload; crossorigin=use-credentials; as=script',
       '</_nuxt/app.modern.js>; rel=preload; crossorigin=use-credentials; as=script',
       `</_nuxt/pages/index.modern.js>; rel=preload; crossorigin=use-credentials; as=script`
     ].join(', '))

test/dev/modern.spa.test.js

@@ -24,26 +24,26 @@ describe('modern client mode (SPA)', () => {
   test('should contain nomodule legacy resources', async () => {
     const { body: response } = await rp(url('/'))
     expect(response).toContain('src="/_nuxt/app.js" crossorigin="use-credentials" nomodule')
-    expect(response).toContain('src="/_nuxt/vendors/commons.js" crossorigin="use-credentials" nomodule')
+    expect(response).toContain('src="/_nuxt/commons/app.js" crossorigin="use-credentials" nomodule')
   })
 
   test('should contain module modern resources', async () => {
     const { body: response } = await rp(url('/'))
     expect(response).toContain('<script src="/_nuxt/app.modern.js" type="module" crossorigin="use-credentials"')
-    expect(response).toContain('<script src="/_nuxt/vendors/commons.modern.js" type="module" crossorigin="use-credentials"')
+    expect(response).toContain('<script src="/_nuxt/commons/app.modern.js" type="module" crossorigin="use-credentials"')
   })
 
   test('should contain legacy preload resources', async () => {
     const { body: response } = await rp(url('/'))
     expect(response).toContain('<link rel="preload" crossorigin="use-credentials" href="/_nuxt/app.js" as="script">')
-    expect(response).toContain('<link rel="preload" crossorigin="use-credentials" href="/_nuxt/vendors/commons.js" as="script">')
+    expect(response).toContain('<link rel="preload" crossorigin="use-credentials" href="/_nuxt/commons/app.js" as="script">')
   })
 
   test('should contain legacy http2 pushed resources', async () => {
     const { headers: { link } } = await rp(url('/'))
     expect(link).toEqual([
       '</_nuxt/runtime.js>; rel=preload; crossorigin=use-credentials; as=script',
-      '</_nuxt/vendors/commons.js>; rel=preload; crossorigin=use-credentials; as=script',
+      '</_nuxt/commons/app.js>; rel=preload; crossorigin=use-credentials; as=script',
       '</_nuxt/app.js>; rel=preload; crossorigin=use-credentials; as=script'
     ].join(', '))
   })
@@ -51,7 +51,7 @@ describe('modern client mode (SPA)', () => {
   test('should contain modern preload resources', async () => {
     const { body: response } = await rp(url('/'), { headers: { 'user-agent': modernUA } })
     expect(response).toContain('<link rel="modulepreload" crossorigin="use-credentials" href="/_nuxt/app.modern.js" as="script">')
-    expect(response).toContain('<link rel="modulepreload" crossorigin="use-credentials" href="/_nuxt/vendors/commons.modern.js" as="script">')
+    expect(response).toContain('<link rel="modulepreload" crossorigin="use-credentials" href="/_nuxt/commons/app.modern.js" as="script">')
   })
 
   test('should contain safari nomodule fix', async () => {
@@ -63,7 +63,7 @@ describe('modern client mode (SPA)', () => {
     const { headers: { link } } = await rp(url('/'), { headers: { 'user-agent': modernUA } })
     expect(link).toEqual([
       '</_nuxt/runtime.modern.js>; rel=modulepreload; crossorigin=use-credentials; as=script',
-      '</_nuxt/vendors/commons.modern.js>; rel=modulepreload; crossorigin=use-credentials; as=script',
+      '</_nuxt/commons/app.modern.js>; rel=modulepreload; crossorigin=use-credentials; as=script',
       '</_nuxt/app.modern.js>; rel=modulepreload; crossorigin=use-credentials; as=script'
     ].join(', '))
   })

test/dev/spa.test.js

@@ -35,7 +35,7 @@ function spaTests ({ isHashMode }) {
     test('/ (include preload and prefetch resources)', async () => {
       const { head } = await renderRoute('/')
       expect(head).toMatch('<link rel="preload" href="/_nuxt/runtime.js" as="script">')
-      expect(head).toMatch('<link rel="preload" href="/_nuxt/vendors/commons.js" as="script">')
+      expect(head).toMatch('<link rel="preload" href="/_nuxt/commons/app.js" as="script">')
       expect(head).toMatch('<link rel="preload" href="/_nuxt/app.js" as="script">')
       expect(head).toMatch(`<link rel="prefetch" href="/_nuxt/${wChunk('pages/custom.js')}">`)
       expect(head).toMatch(`<link rel="prefetch" href="/_nuxt/${wChunk('pages/error-handler-async.js')}">`)