You Don’t Have to Lose Optimization for Micro-Frontends

A way to progressively load chunked micro-frontends from your manifest.json

Jennifer Fu
Mar 26 · 3 min read
Photo by Tomas Williams on Unsplash

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 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:


The Code Repositories

  • 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 start

The Launch Command

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

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:

Better Programming

Advice for programmers.

Jennifer Fu

Written by

A seasoned frontend developer https://www.linkedin.com/in/jennifer-fu-53357b/

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Fun Side Projects That You Can Build Today

3K

More from Better Programming

More from Better Programming

The Zero-Dollar Infrastructure Stack

1.1K

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade