Nuxt.js: reduce the number of chunks

readme.md

To reduce the number of chunks of your project build with Nuxt.js add the next lines:

  if (!this.dev) {
    config.plugins.push(new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 3        
    }))
  }

right under extend (config, ctx) { of nuxt.config.js. Then build your project with npm run build. Et voilà, No more than 3 chunks :-) Loading times of my pages went from 1.2s to 600ms!

Another thing to try and fiddle with:

new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 15
      }),
      new webpack.optimize.MinChunkSizePlugin({
        minChunkSize: 10000      
      })

Made 5 bundles (besides the vendor and nuxt)

This reduced chunk count to 3 per page for me:

build: {
  extend(config, ctx) {
    if (ctx && ctx.isClient) {
      config.optimization.splitChunks.minChunks = 10
      config.optimization.splitChunks.minSize = 240000
    }
  },
}

I just encountered this while working on my project. Somehow it is impossible for me to do it within one chunk. That is because I have codes in the middleware and also server side.

config.plugins.push(new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 2 // 1 for client and 1 for server
    }))