Microfrontends: a retrospective

I have been doing a lot of testing for this, trying to find ways to speed up the install/build process.

First I was able to make the build/install time drop by a factor of 4 by enabling the docker built kit [1] feature, by just setting DOCKER_BUILDKIT=1 docker build mfe/ this allowed docker to run or execute a command in parallel for stages which don’t depend on each other.

Secondly besides the build time, (here what I mean by build is the actual npm run build command not the docker build) almost equal time was for npm install because npm install is expensive, it writes a lot of files or modules to the systems… while trying stuff around, I tried using pnpm [2] it cut the install by half, however, it was useless, because after running pnpm install I couldn’t build/create the bundle.

However that can be promising, I didn’t want to spend a lot of time trying stuff out before we start using node 14 with npm 8 because otherwise, I might come up with something that would be unnecessary or useless once an upgrade occurs.

Another thing that might be promising is, since npm >=7, npm introduce workspace[3], which can be helpful for speeding up install/build time for projects that are related to each other. However for us to make use of it or another similar tool, it would be super useful if the MFEs would depend on the same version for shared packages, what I mean by that is, for example, there are 19 npm packages that are shared between the (account, profile, gradebook, learning) however of those 19, only 2 package are being shared with the exact version number. [4]

[1] Build images with BuildKit | Docker Documentation
[2] https://pnpm.io/
[3] workspaces | npm Docs
[4] It's just a simple script that check for the package.json for selected MFEs and it then outputs two main thing: · GitHub

3 Likes