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.