Webpack Vendor Bundle Is Tiny

Help Requests
1

I’m using the Aurelia CLI-Webpack setup. When I build for production it seems that Webpack is not putting vendor components in the vendor bundle, looking at the size of the files. I thought that Webpack automatically separated app components from vendor components.

image

I could list my webpack.config.js file here but I am basically using the version created by the CLI. Do I have to manually specify vendor modules somewhere?

2

The cli template uses the entry setting to tell webpack to split bundles. If you put more module names under entry.vendor your vendor bundle will grow.

However you can also have webpack do this automatically by using the CommonChunksPlugin like so

new CommonsChunkPlugin({
      name: "vendor",
      minChunks: function(module){
        return module.context &&(module.context.indexOf("node_modules") !== -1 || module.context.indexOf("vendor") !== -1);
      }
    }),
    new CommonsChunkPlugin({
      name: "manifest",
      minChunks: Infinity
    }),

And removing the entry.vendor

I opened a ticket on the cli repo to use this style of bundling - but I’m not a webpack expert there may be downsides to this but none I’ve found so far

2 Likes
3

It turns out that I can split my code into chunks very easily by passing a chunk name as the second parameter of PLATFORM.moduleName(). Aurelia and webpack automatically create a chunk out of it. Thanks to this discourse article:

1 Like