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.
Now what?
We need to modify Cam Jackson’s MicroFrontend.js to handle chunks:
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:
Hook version of MicroFrontend.js
As a bonus, we convert MicroFrontend.js to use Hook.
As natansevero pointed out, for anybody that using this algorithm and do not want to load all micro front-end JavaScript on the <head> tag, you can replace the code from line 33 to document.body.after(script). It works as expected :)
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
npm i
npm start- 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
npm i
npm startAs matter of this improved version of MicroFrontend.js, you don’t have to use
react-app-rewiredin step 1, and step 2 can be completely skipped. 5 steps are reduced to 3.5.
This saving is captured in the chunkOptimization branch.
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"'runBoth uses concurrently command to start both the app container and the micro-frontend app. For this branch of work, we retain optimization for micro-frontends.
Conclusion
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-frontend. The following is a list of other articles:
- “5 Steps to Turn a Random React Application Into a Micro Front-End”
- “3 Steps to Turn a Random React Application Into a Micro-Frontend Container”
- “Build Your Own Micro-Frontend Ecosystem”
- “10 Decision Points for a Micro-Frontend Approach”
- “6 Steps to Create a Multi-Version React Application”
- “Micro Frontends Using Webpack 5 Module Federation”
