Micro Frontend Solution 8 - Secondary Build

2018-09-07

Secondary Build

Further optimize our micro frontend performance

In a micro frontend architecture, each module outputs fixed files, such as the previously mentioned:

Project config file
Store.js file
main.js render entry file

These three are the necessary files for each module in a micro frontend architecture.

When the module loader starts the entire project, it must load all modules’ config files and Store.js files. In a previous article, we discussed config automation, which is essentially a simple form of secondary build. Although each module’s config file is not very large, each file is loaded and is necessary for project startup. Each file takes one HTTP request, and each file’s blocking affects the project’s startup time.

Therefore, our Store.js must also be optimized. Of course, if we don’t have many modules, there’s no need to optimize. But once the project grows larger, with dozens of modules, we can’t load dozens of files at once. We must rebuild the entire project after deployment to optimize and integrate it.

Our Store.js is an AMD module, so we need a tool to merge AMD modules.

Grunt or Gulp

For scenarios like this, task management tools like Grunt and Gulp are perfect. Even though these tools seem like relics from the last century, their ecosystems are still very mature. They’re very suitable for secondary builds in micro frontends.

For example, Gulp:

const gulp = require("gulp");
const concat = require("gulp-concat");

gulp.task("storeConcat", function () {
  gulp
    .src("project/**/Store.js")
    .pipe(concat("Store.js")) // merged file name
    .pipe(gulp.dest("project/"));
});

There are many more such optimization points. After project release, secondary builds and code optimization can greatly improve our project’s performance in large-scale projects.

To be continued …

Micro Frontend Solution 1 - Thinking

Micro Frontend Solution 2 - Single-SPA

Micro Frontend Solution 3 - Module Loader

Micro Frontend Solution 4 - Message Bus

Micro Frontend Solution 5 - Route Distribution

Micro Frontend Solution 6 - Build & Deploy

Micro Frontend Solution 7 - Static Data

Micro Frontend Solution 8 - Secondary Build