Can I choose which locales are loaded?

[muuvmuuv]

We have limited CI time in our project and I would like to reduce the time where our prod build is deployed so I am investigating now which files are not necessary. I saw that this lib has a lot of translation files which in our case are not all needed. We would just need en, de and fr locales.

Is there a way to declare which locales are used so not all are build into the dist folder?

[stephanrauh]

Yes, you can do that. The documentation suggests to copy the entire assets folder, but most of the time, you only need a small fraction of the files. You can configure the architect -> build -> options -> assets section of your angular.json like so:

• First of all, omit the folder cmaps. You only need it to display old East-Asian files.
• The folder additional-locales shouldn't even be part of the distribution. Omit it.
• The folder inline-locale-file isn't used by the PDF viewer. Get rid of it. I'll talk about it again in a minute.
• The library loads only the files of the folder locale of the languages you need. Drop everything else.

You can even get rid of the entire folder if you inline the translation files. That's what the folder inline-locale-file is for. It contains HTML snippets you can add to your index.html (or any other HTML file of your application). Basically, every file is a little JSON snippet covering a single language. You can also merge the content of the HTML snippets of French, English, and German into a single one.

The advantage of this approach is that ngx-extended-pdf-viewer uses two requests less. In other words, it's faster. The disadvantage is you need to update the HTML snippets when you update ngx-extended-pdf-viewer. Currently, the base library updates roughly four times a year, so you end up updating the HTML snippets four times a year, too. On the other hands, the translation files are pretty stable, so you can skip an update every once in a while.

[muuvmuuv]

Thanks! This is nice and well-thought, man! I will forward that to the team. Inlining wouldn't make sense on our setup since the app is "generated" through an API configuration loaded on first start (ionic app) and cached for later use. So just parts where PDF's are displayed needs them and these are less opened from a user.

[stephanrauh]

Sounds like you're writing an Android app. If so, you can probably also drop the *es5.js files. Originally, these were the files to support IE11, but several other mobile browsers also need them, especially if the devices aren't updated frequently.

I don't think that makes a big difference with respect to your CI time, but it reduces the package size.

[muuvmuuv]

True. Never thought about getting rid of es5-stuff. Ionic uses a WebView for iOS and Android and as far as I remember those already support modules. Package size is one thing but also CI time since the upload process to our web app takes some time (we deploy every feature, fix etc. branch to generate reproduceable instances of said branch) and we don't want to waste all CI time for the app :D the backend teams has just started using the CI and not much is left (probably a higher tier makes sense but this is another shoe).

[muuvmuuv]

Copy-and-paste angular.json-Assets configuration to reduce the bundle size:

{
  "input": "node_modules/ngx-extended-pdf-viewer/assets/",
  // Adjust your locales here but do not remove "locale" because it is required
  "glob": "**/{locale,de,en-GB,fr,ru,es-ES}/?*.properties",
  "ignore": ["**/additional-locale/*"],
  "output": "./assets/"
},
{
  "input": "node_modules/ngx-extended-pdf-viewer/assets/",
  "glob": "**/*.min.js",
  "ignore": ["*-es5\\.*"],
  "output": "./assets/"
}

Comparison

Include everything

pnpm nx build  62,71s user 5,68s system 230% cpu 29,682 total
 49M	dist/apps/entergon/assets

Exclude unnecessary

pnpm nx build  77,95s user 6,72s system 209% cpu 40,437 total
3,3M	dist/apps/entergon/assets

I guess the extra 10 seconds of build time come from the path regex, but this is totally fine for that bundle size reduction.

[stephanrauh]

Yeah, cool! I didn't know you can use a comma-separated list in a glob. Awesome! Thank you very much for telling us!