CODEWITHSUNDEEP
webpack
albertfdp
albertfdp

Reputation: 427

Combine multiple webpack chunks

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!

Upvotes: 3

Views: 3033

Answers (2)

Marc Guillem
Marc Guillem

Reputation: 174

Maybe you are looking for /* webpackMode: "eager" */ magic comment. This would compile all imports into single file.

Example:

const module = await import(
      /* webpackChunkName: "exported-web-components" */ 
      /* webpackMode: "eager" */
      "./app/components-to-export/" + key + "/" + key + ".component");

Sorry if im late, im dealing with this problem right now 😅

Upvotes: 0

UjinT34
UjinT34

Reputation: 4977

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.

Upvotes: 2

Related Questions