When a translation file is initially loaded, the browser views it as a static asset, and as such, might cache it for a long time (depending on how your website is configured to leverage browser caching).
To prevent visitors from being served with an older, cached version of the file, which might lack some translation, you can employ a cache-busting functionality.
This entails attaching a unique version identifier to the file, which ensures that a fresh version is fetched, instead of a stale, cached version.
In this article, we’ll examine two strategies to apply cache busting to our translation files, using Angular and Transloco.
Using Webpack Define Plugin
The first strategy is straightforward. We need to create a unique string each time we build the application and append it as a query string to the URL address.
There are various ways to create a unique string at compile-time, but we’ll go with WebpackDefinePlugin. The DefinePlugin allows you to create global constants that can be configured at compile time.
angular-cli doesn’t come with built-in support for a custom Webpack config, so we’ll use ngx-build-plus, which provides this functionality. First, install the library by running ng add ngx-build-plus, and create a webpack.config.js file in the project’s root folder.
Next, add the DefinePlugin to the plugins array:
Now, you can use the VERSION variable anywhere in the application, and Webpack will replace it with the result of the getTime() method at compile-time. Let’s use it in our loader:
Each time we make a new deploy, we’ll get a different result for the VERSION variable; therefore, the browser will not retrieve the old file from cache but instead requests the origin server for the new file.
At first glance, this method seems ok, and yes, it will work. However, there is one disadvantage when using it.
We are changing the VERSION variable each time we deploy our code to production even though none of the translation files was changed. Imagine applications that do this several times a day; it’ll invalidate the cache each time, thus makes this whole process worthless.
Furthermore, the translation files are usually sent to translators once a week or month, for example, so it would be wasteful to force the client to re-download them each time we make a deploy.
Using Webpack Dynamic Imports
We can do better. If the content of the translation file didn’t change, there’s no need to invalidate it. We can leverage Webpack dynamic imports to do the work for us. Let’s modify Transloco’s Http Loader and add it:
Webpack creates a separate chunk for each one of the translation files. When we run ng build — prod, it’ll append a hash to the file name, based on the file’s content checksum:
As long as the content of the file isn’t changed, we’ll always get the same hash.
DIY Translation Files Checksum
In this section, I’ll show you how to implement a checksum-based method manually, for those who prefer to stay with the HTTP loader.
We need to write a script that’ll run before Webpack compiles our code. It can be done by writing a Webpack Plugin, a Gulp task, or npm script. To keep it simple, we’ll go with npm script:
The process is simple. We need to loop over the translation files, reduce it to an object where each key is the language name, and the value is the file checksum. Then, we save it in a JSON file so we can reference it from our loader:
When we run the script we’ll get the following output:
Next, we need to adjust the tsconfig.json file to support JSON imports:
Now we can use this file in our loader, and append the language checksum as a query string:
It’s also a good idea to add the i18n-cache-busting.json file to .gitignore.
Note that there are CDN servers that ignore query strings and will still return the file from the cache if the name itself doesn’t change. Usually, to fix it, it’s just a matter of changing a flag in your server.
🚀 In Case You Missed It
- Akita: State Management Tailored-Made for JS Applications
- Spectator: A Powerful Tool to Simplify Your Angular Tests
- Transloco: The Internationalization library Angular
Follow me on Medium or Twitter to read more about Angular, Akita and JS!
Strategies for Cache-Busting Translation Files in Angular was originally published in Netanel Basal on Medium, where people are continuing the conversation by highlighting and responding to this story.