Webpack maximum chunk size

Question

My current configuration is 1 bundle.js file with the main stuff the application needs (angular etc..) and all the others are lazy loaded via require.ensure in the application code.

After minify the bundle.js is above 100KB with just the basics for the application. Is it possible to tell webpack to split the main bundle to max 20KB or so chunks so the browser can download them concurrently?

Answer 1

I haven't come across a good way to split chunks based on the bundle result itself. You can set a min size for output chunks so that they are merged when there aren't many bytes in your chunk.

    // This plugin prevents Webpack from creating chunks
    // that would be too small to be worth loading separately
    new webpack.optimize.MinChunkSizePlugin({
        minChunkSize: 51200, // ~50kb
    }),

But, I know that's not what you're looking for. Unfortunately, it looks like nobody has written anything like that yet. Sounds like an interesting plugin to write!

Also, Take a look at this blog, which walks through some of the splitting basics. http://blog.madewithlove.be/post/webpack-your-bags/