Duplicate webpack chunks

When I build my bundle (dev works fine) I find that two chunks (names starting with 0 and 1) are almost completely similar. Content of chunk 1 is covered completely by content of chunk 0 and chunk 0 is slightly larger containing an extra child vue component. To me it seems like all imports of a child.vue component are again included when the child.vue component is imported into a parent.vue component. I thought webpack would weed this out… but apparently not.

The parent.vue component:

<script type='text/babel'>
import Child from './Child.vue'

export default {
  name: 'parent',
  components: {Child}
}

</script>

relevant part of child.vue component:

<script type='text/babel'>
import turf from 'turf'
import {resize} from '@most/dom-event' 
 
[[etc]]

in router.js:

  routes: [
    { path: '/parent', component: load('parent') },
    { path: '/', component: load('Index') }, // Default
    { path: '*', component: load('Error404') } // Not found
  ]
})

I also would expect the turf and all other npm packages from node_modules to go into a separate vendor chunk, but they are in both chunk 0 and 1: (i.e. no vendor chunks):

Hash: 1b94a25680bff29f4960
Version: webpack 2.2.0
Time: 44975ms
                                   Asset       Size      Chunks                    Chunk Names
            js/5.ceea6d62238ac33ab65a.js  987 bytes        5, 8  [emitted]         
fonts/MaterialIcons-Regular.012cf6a.woff    57.6 kB              [emitted]         
            js/1.00c968884dd42ca9abe7.js    1.07 MB        1, 8  [emitted]  [big]  
            js/2.a15df363f7a95520359b.js    6.28 kB  2, 3, 5, 8  [emitted]         
            js/3.09b86cd9939dea1b32d0.js    2.53 kB        3, 8  [emitted]         
            js/4.1de965c7ddc632ca7966.js    1.95 kB        4, 8  [emitted]         
            js/0.5c94c88f8cc301c30326.js    1.08 MB     0, 1, 8  [emitted]  [big]  
                            js/vendor.js     562 kB        6, 8  [emitted]  [big]  vendor
                               js/app.js    9.68 kB        7, 8  [emitted]         app
                          js/manifest.js    1.58 kB           8  [emitted]         manifest
app.8a73cdb0886334e9bc2ff358859b1203.css     246 kB        7, 8  [emitted]         app
                              index.html  616 bytes              [emitted]         

Process finished with exit code 0

What am I doing wrong?:

  1. why do I have duplicate code in my chunks?
  2. why are node_module libraries not in the vendor chunk?

what is that load() method in the router config? I would assume it adds a code splitpoint which would explain the additional chunks.

1 Like

You’re right when I get rid of the load function it works as expected (and vendor chunk is also as expected) and I get:

Hash: 44e71b7f99a8c23f744a
Version: webpack 2.2.0
Time: 37300ms
                                   Asset       Size  Chunks                    Chunk Names
fonts/MaterialIcons-Regular.012cf6a.woff    57.6 kB          [emitted]         
                            js/vendor.js    1.59 MB    0, 2  [emitted]  [big]  vendor
                               js/app.js    41.6 kB    1, 2  [emitted]         app
                          js/manifest.js    1.43 kB       2  [emitted]         manifest
app.1b4a3bd6bcac26b9462e4d297ad634b4.css     270 kB    1, 2  [emitted]  [big]  app
                              index.html  616 bytes          [emitted]         

Process finished with exit code 0

I got the load function from here:

And also find this way of dealing with the routes in other repos, so probably it serves a purpose. I will ask overthere.

This is solved, thanks!

1 Like

Looked at your repo and have a few comments:

  1. Children component files should be placed under a subdirectory or in a different directory. When System.import-ing with a file based on a variable (so not known which will it be at compile time) then Webpack builds chunks for all files in that directory. It does not mean browser will actually load them all, just the right one at runtime (which is the parent in your case).

  2. You don’t need to specify text/babel in your <script type='text/babel'> tags. Simply use <script>.