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)

Hi,
While using this code on nuxt I am getting an error stating my webpack is not defined, should I just import the webpack above or what should I do ?

Cheers

const webpack = require('webpack')

Error: [nuxt] Error while mounting app: TypeError: o.e is not a function

This is the error i am getting

Error: [nuxt] Error while mounting app: TypeError: o.e is not a function

This is the error i am getting

@maverickpravin got the same thing, what did you do to resolve the issue?

This is how I done it, FYI, and it's working without issues:

	/*
	** You can extend webpack config here
	*/
	extend (config, ctx) {
		if (!this.dev) {
			config.plugins.push(
				new webpack.optimize.LimitChunkCountPlugin({
					maxChunks: 3
				}),
				new webpack.optimize.MinChunkSizePlugin({
					minChunkSize: 10000
				})
			);
		}
	}

@rvanzon It no longer works, unfortunately, getting error:

ERROR in chunk runtime [entry]
Cannot convert undefined or null to object

ERROR in chunk runtime [entry]
[contenthash:7].js
Path variable [contenthash:7] not implemented in this context: [contenthash:7].js

I have the same error as @simplenotezy

@AllanOricil @simplenotezy

Here it is the solution:

webpack/webpack#12535

new webpack.optimize.LimitChunkCountPlugin({
					maxChunks: 4
				})

@Runnea thanks.
But I only needed one chunk. After studying webpack I found the way to fix it.

build: {
    extend(config, ctx) {
        config.output.filename = 'app.js',
        config.output.chunkFilename = '[id].js'; //without changing this, the error with one chunk happens when using maxChunks: 1
        config.optimization.splitChunks.cacheGroups.default = false;
        config.optimization.runtimeChunk = false;
    }
}

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
    }))