Use fingerprinted file name for microfrontend entrypoint bundle to enable caching it #2
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Enables us to add a caching header to the response that fetches the entrypoint bundle of a microfrontend like. Since the file name of the entrypoint bundle contains a md5 hash based on the content of the file, we know that if a bundle with the same name has been fetched by the browser, it is unchanged. E.g. caching for one year: Cache-Control: max-age=31536000 The main.js file name we used before did not allow for caching, while still ensuring that all customers always get the latest micro frontend code.
xkons
force-pushed
the
caching-entrypoint-bundles
branch
from
cd9fa08 to
aa70d57
Compare
xkons
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds caching for the micro frontend bundles on top of #1
To make our our micro frontends cacheable, we adjust their build step to generate the
main.jsentrypoint file with a content based hash in the filename. This can easily be done using the Angular CLI. Then we just need to store the information of this filename in a file on the static storage (e.g. netlify) of the micro frontend so that we can load it. This newfrontend-meta.jsonjust weighs 1kB and will not be cached, so that it always contains the latest hashed entrypoint file name.When loading a micro frontend, we now first load the frontend-meta.json and then the fingerprinted
main.<hash>.jsfile. The latter will be cached by the browser. So until we deploy a new version of a micro frontend, the browser of our users will not have to download the roughly 500kB to open a page with that micro frontend anymore, but it is directly loaded from the users cache stored on their computer.Important to know: The
frontend-meta.jsonshould never be cached by your clients to ensure that they always get the latest entrypoint bundle of your microfrontend.This PR enables us to add a caching header to the response that fetches the entrypoint bundle of a microfrontend like.
Since the file name of the entrypoint bundle contains a md5 hash based on the content of the file, we know that if a bundle with the same name has been fetched by the browser, it is unchanged.
E.g. caching for one year:
Cache-Control: max-age=31536000
The main.js file name we used before did not allow for caching, while still ensuring that all customers always get the latest micro frontend code.