Bundle all locales with a single webpack build

[grebenyuksv-preply]

Dear maintainers, your library looks very promising, but I can't use it as is because I have to run a separate webpack build for every locale. We have more than 10, so that would increase our build time from 2.5 to 25mins, which we can't afford. Am I missing an easy way around? If not, has it ever been an issue for you, and do you have any plans to solve that?

[AlexMost]

Hey, thanks for your attention! There is an option to make one build, but then you need to load your translations at a runtime. Here are some doc for that:

• localization process in general - https://c-3po.js.org/quick-start.html#4-load-translations
• webpack example - https://c-3po.js.org/localization-with-webpack-and-c-3po.html#4-localization-with-dev-setup.
• Loading translations at a runtime in general - https://c-3po.js.org/translations-without-transpile.html

Can that approach solve your issue?

[AlexMost]

Shortly speaking here is the code that loads locale at a runtime

import { addLocale, useLocale } from 'c-3po';

const ukLocale = require('./uk.po');
addLocale('uk', ukLocale);
useLocale('uk');   

[grebenyuksv-preply]

Thanks for your prompt response! Those tutorials are great. The problem with that approach is that I wouldn't like to serve all our 800kb of translations in a single bundle.

Our React app has a lot of entry points, possibly several per page. What I'd like to achieve is separate translation bundles per entry point — looks like the plugin can't do that, can it?

Am I overengineering things? Have you ever had the same problem?

[AlexMost]

In theory each entry point can have each own .po file and this can reduce translations size. But this will complicate your workflow.

Also, note that dynamic import will create a separate chunk with translations that browser can cache, so maybe that's not a big deal.

There are some ideas on how we can improve and simplify workflow with webpack. I am going to create tasks for that soon.

Your case is not the unique one, we also have a big react app with multiple entry points and we solved that in a way that each entry point (which is a standalone app) has it's own .po file.

[AlexMost]

One thing that came to my mind is that we can create some kind of c-3po-webpack-plugin that will inject only those translations that are present in a bundle for all locales. Or will create multiple result files without significant extra time for the build. Need to think about it. How do you see the ideal workflow for that?

[grebenyuksv-preply]

Ok, we technically want the same thing, a .po file per entry point, but we have to bundle them in a single webpack build e.g. because we use CommonChunkPlugin. Do you run separate webpack builds for entries in your case?

I just wanted to make sure I'm not missing the fact that the library can already do this. Next step for me would be reading the code and trying to tweak the plugin.

I'm not sure about the ideal workflow here, haven't gone so deep yet, I'll probably think more and amend this.

[grebenyuksv-preply]

The only thing I can come up with right now is that we also need a React Native solution which only uses babel, but not Webpack (metro instead).

I'm not sure right now if the babel can technically get the Webpack's entry chunk name in order to split the .po files accordingly. I'll return here when I have suggestions.

[AlexMost]

To avoid bundling all translations, you can use dynamic imports - webpack will create separate chunks for each .po and will load exactly what was imported.

To be closer to the point, you can set up some example repository with the same build config, and I will try to help you with the localization setup there.

[grebenyuksv-preply]

That sounds awesome, here we go, I just forked c-3po demo and created two entry points from that: https://github.com/grebenyuksv-preply/c-3po-demo/tree/multiple-entries. I think I haven't fully understood your plan since my goal is to only load the translations required by the entry chunk, but we can't create multiple corresponding .po files yet. I'll be very grateful if you can make it work!

[AlexMost]

ok, I will take a look soon) Sorry for the late response, was on a vacation.

[erickwilder]

I currently started to investigate this issue and so far my in my experiment a webpack plugin is necessary.

I'm currently trying to integrate this into a Vue project but without some hacks I can't. I also bumped into this issue as our setup uses webpack configuration as a list, and by using it like that is possible to use parallel-webpack without any hassle.