You Don’t Have to Lose Optimization for Micro-Frontends
A way to progressively load chunked micro-frontends from your manifest.json
After “5 Steps to Turn a Random React Application Into a Micro Front-End,” we were asked by a reader:
In project too large, if not split code when loaded, so it becomes hard to scalable and will have a bad effect on UX.
Yes, it is a valid statement. We have to resolve this issue.
How Does Code Work?
In “3 Steps to Turn a Random React Application Into a Micro-Frontend Container,” we showed how micro-frontend works. Micro-frontends run as independent applications. At the bundling stage or runtime, these applications are loaded into a micro-frontend container. The application container runs them as if these micro-frontends are its own components and provides a seamless workflow to users.
In our basic example, there is one micro-frontend app and one app container.
This translates to the below illustration, with a micro-frontend app on the left and an app container on the right.
In order to make it work, we disable chunk optimization, which splits the code into small chunks to be progressively loaded.
Here we re-enable chunk optimization.
Lines 13 to 38 load small chunked js files. When all chunks are loaded, it invokes
this.renderMicroFrontend() at line 31. This is how micro-frontends can preserve optimization.
Now we can see micro-frontend’s three chunked files are loaded:
They are embedded in the app container’s HTML files:
The Code Repositories
There are two code repositories for this example:
- The app container: The three-step converted application container is located here.
git clone --single-branch --branch chunkOptimization https://github.com/JenniferFuBook/app-container.git
- The micro-frontend app: The five-step converted micro-frontend application is located here.
git clone --single-branch --branch chunkOptimization https://github.com/JenniferFuBook/micro-frontend.git
The Launch Command
Assume these two repositories are in your
home directory. Set the following alias in your Bash profile:
alias runBoth='cd ~/app-container; concurrently "npm start --prefix ~/micro-frontend" "npm start"'
concurrently command to start both the app container and the micro-frontend app. For this branch of work, we retain optimization for micro-frontends.
You don’t have to lose optimization for micro-frontends.
Part of this work is contributed by Jonathan Ma.
Thanks for reading. I hope this was helpful.
This is a series about micro front-end. The following is a list of other articles: