Forcing a specific shared module to go into it’s own chunk

Imagine a SPA with one entry chunk and 10 pages. 3 of those pages use highcharts and highcharts is quite hefty.

I don’t want to put it into entry chunk to not slow down the initial page load and it’s only needed in 3 pages anyway.
I don’t want to put it into each of those 3 page chunks since it weighs them all down.

I want to force highcharts into it’s own chunk, independently of how other chunks are created and merged, moved to parent, etc. I want this highcharts chunk to only be loaded if one of those 3 pages is loaded.

I can achieve that in r.js with modules/include/exclude config. I was wondering if there’s a way to achieve this in webpack.

The only thing I could think of (while typing this issue) is to try and put a require.ensure(["highcharts"]) into the entry chunk and hope that highcharts will end up into it’s own chunk and won’t be bundled together with other chunks. I’ll try that now and see if it works.

Finally, I imagine a plugin could be written where you could say something like new ForceChunk(["highcharts"]), but was wondering if there’s already a way to achieve this. Also, not sure if this plugin is possible without converting require("highcharts") calls into async calls in those 3 pages.

Author: Fantashit

1 thought on “Forcing a specific shared module to go into it’s own chunk

  1. Was there any progress on this issue? My use case is that translations are packed into the commons file, so I won’t benefit from caching if either of these is updated.

    I don’t know how the plugin works internally, but it doesn’t seem difficult to add an exclude option, e.g.:

    new webpack.optimize.CommonsChunkPlugin({
        name: 'commons',
        exclude: ['i18n'],
        minChunks: 2,
    })
    
    

Comments are closed.