Combine multiple webpack chunks

user_1794589 0
Viewed 1901

I am working on a large application where I need to async load multiple translations for the same locale (i.e. the application translations + moment locale translation + other).

So, everytime the user changes locale, we would need something like:

translations.en.json
moment/locales/en.json
other/en.json

I am lazy loading them, but I would like to do it in a single request. So that I can do:

import('translations/en').then(() => ...

And that should require all of them. I have managed to write a script that creates one file per each of our supported locales that contains those 3 imports, but webpack would still split it in multiple async chunks. Is it possible to somehow merge them per locale?

Thanks!

webpack
1 Answers

Use webpackChunkName hint to place several imports into one chunk

import(/* webpackChunkName: "translations/en" */ 'translations/en').then(() => ...
import(/* webpackChunkName: "translations/en" */ 'moment/locales/en').then(() => ...
import(/* webpackChunkName: "translations/en" */ 'other/en').then(() => ...

Note that you can't create a function that takes language as argument with this solution because hints must be determined at compile time. So you'll have to repeat all three lines for every locale. But it might work well with your script that creates a file with those imports.

If it doesn't help take a look at SplitChunksPlugin documentation.

user_96028630
Related