fix(webpack): avoid grouping with default name (#7808)

[release]

packages/config/src/config/build.js

@@ -62,12 +62,8 @@ export default () => ({
     minimizer: undefined,
     splitChunks: {
       chunks: 'all',
-      name: undefined,
+      automaticNameDelimiter: '/',
-      cacheGroups: {
+      cacheGroups: {}
-        default: {
-          name: undefined
-        }
-      }
     }
   },
   splitChunks: {

packages/config/test/__snapshots__/options.test.js.snap

@@ -113,13 +113,9 @@ Object {
       "minimizer": undefined,
       "runtimeChunk": "single",
       "splitChunks": Object {
-        "cacheGroups": Object {
+        "automaticNameDelimiter": "/",
-          "default": Object {
+        "cacheGroups": Object {},
-            "name": undefined,
-          },
-        },
         "chunks": "all",
-        "name": undefined,
       },
     },
     "optimizeCSS": false,

packages/config/test/config/__snapshots__/index.test.js.snap

@@ -89,13 +89,9 @@ Object {
       "minimizer": undefined,
       "runtimeChunk": "single",
       "splitChunks": Object {
-        "cacheGroups": Object {
+        "automaticNameDelimiter": "/",
-          "default": Object {
+        "cacheGroups": Object {},
-            "name": undefined,
-          },
-        },
         "chunks": "all",
-        "name": undefined,
       },
     },
     "optimizeCSS": undefined,
@@ -469,13 +465,9 @@ Object {
       "minimizer": undefined,
       "runtimeChunk": "single",
       "splitChunks": Object {
-        "cacheGroups": Object {
+        "automaticNameDelimiter": "/",
-          "default": Object {
+        "cacheGroups": Object {},
-            "name": undefined,
-          },
-        },
         "chunks": "all",
-        "name": undefined,
       },
     },
     "optimizeCSS": undefined,

packages/webpack/src/config/client.js

@@ -66,14 +66,14 @@ 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',
-        priority: 10,
+        name: 'node_modules/commons',
-        name: true,
+        priority: 10
-        automaticNameDelimiter: '/'
       }
     }
 
-    if (!this.dev && cacheGroups.default && cacheGroups.default.name === undefined) {
+    if (!this.dev && splitChunks.name === undefined) {
-      cacheGroups.default.name = (_module, chunks) => {
+      const nameMap = { default: 'commons', vendors: 'node_modules' }
+      splitChunks.name = (_module, chunks, cacheGroup) => {
         // Map chunks to names
         const names = chunks
           .map(c => c.name || '')
@@ -85,15 +85,9 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
           .filter(Boolean)
           .sort()
 
-        // Fixes https://github.com/nuxt/nuxt.js/issues/7665
+        // Fallback to webpack chunk name or generated cache group key
-        // TODO: We need a reproduction for this case (test/fixtures/shared-chunk)
+        if (names.length < 2) {
-        if (!names.length) {
+          return chunks[0].name
-          return 'commons/default'
-        }
-
-        // Single chunk is not common
-        if (names.length === 1) {
-          return names[0]
         }
 
         // Use compact name for concatinated modules
@@ -101,7 +95,8 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
         if (compactName.length > 32) {
           compactName = hash(compactName)
         }
-        return 'commons/' + compactName
+        const prefix = nameMap[cacheGroup || 'default'] || cacheGroup
+        return prefix + '/' + compactName
       }
     }
 

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/commons/app.js')
+    expect(response).toContain('script nomodule crossorigin="use-credentials" src="/_nuxt/node_modules/commons.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/commons/app.modern.js"')
+    expect(response).toContain('<script type="module" crossorigin="use-credentials" src="/_nuxt/node_modules/commons.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/commons/app.modern.js" as="script">')
+    expect(response).toContain('<link rel="modulepreload" crossorigin="use-credentials" href="/_nuxt/node_modules/commons.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/commons/app.modern.js>; rel=modulepreload; crossorigin=use-credentials; as=script',
+      '</_nuxt/node_modules/commons.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/commons/app.js')
+    expect(response).toContain('/_nuxt/node_modules/commons.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/commons/app.modern.js')
+    expect(response).toContain('/_nuxt/node_modules/commons.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/commons/app.js>; rel=preload; crossorigin=use-credentials; as=script',
+      '</_nuxt/node_modules/commons.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/commons/app.modern.js>; rel=preload; crossorigin=use-credentials; as=script',
+      '</_nuxt/node_modules/commons.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/commons/app.js" crossorigin="use-credentials" nomodule')
+    expect(response).toContain('src="/_nuxt/node_modules/commons.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/commons/app.modern.js" type="module" crossorigin="use-credentials"')
+    expect(response).toContain('<script src="/_nuxt/node_modules/commons.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/commons/app.js" as="script">')
+    expect(response).toContain('<link rel="preload" crossorigin="use-credentials" href="/_nuxt/node_modules/commons.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/commons/app.js>; rel=preload; crossorigin=use-credentials; as=script',
+      '</_nuxt/node_modules/commons.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/commons/app.modern.js" as="script">')
+    expect(response).toContain('<link rel="modulepreload" crossorigin="use-credentials" href="/_nuxt/node_modules/commons.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/commons/app.modern.js>; rel=modulepreload; crossorigin=use-credentials; as=script',
+      '</_nuxt/node_modules/commons.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/commons/app.js" as="script">')
+      expect(head).toMatch('<link rel="preload" href="/_nuxt/node_modules/commons.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')}">`)

test/fixtures/shared-chunk/components/lazy.vue

@@ -3,3 +3,11 @@
     Lazy Components
   </div>
 </template>
+
+<script>
+import 'cheerio'
+
+export default {
+
+}
+</script>

test/fixtures/shared-chunk/components/shared-vendor.vue

@@ -5,15 +5,5 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import 'lodash'
-import $ from 'cheerio'
-
-export default {
-  data () {
-    $('<a>A</a>')
-    return {
-      test: _.startCase('lodash')
-    }
-  }
-}
 </script>

test/fixtures/shared-chunk/nuxt.config.js

@@ -1,4 +1,3 @@
 export default {
-  components: true,
+  components: true
-  modern: true
 }