The article was forwarded by Alili. Tech

Secondary building

Further optimize our micro front-end performance

In the microfront-end architecture, each module outputs a fixed file, as mentioned earlier:

  • Project profile
  • Store. Js file
  • Main.js renders the entry file

These are the three files required for every module in the microfront-end architecture.

When the module loader starts the entire project, it must load all module configuration files and store.js files. The issue of configuration automation, addressed in the previous article, is a simple secondary build. Although the size of the configuration file for each module is not very large, each file will be loaded and is a necessary file for the project to start. Each file accounts for an HTTP request, and each file blocking affects the startup time of the project.

Therefore, our store.js must also be optimized. Of course, if our module number is not very large, we do not need to optimize. But once the project got bigger, there were dozens of modules. We can’t load dozens of files at a time, we have to rebuild the entire project after deployment to optimize and integrate our project.

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

Grunt or Gulp

Task management tools such as Grunt and gulp are ideal for such scenarios. Although these tools seem to be from the last century, their ecology is still perfect. It is very suitable for the secondary construction of micro front-end.

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')) // The merged file name
        .pipe(gulp.dest('project/'));
});
Copy the code

There are many more optimization points like this, after the project is released, in the secondary build and optimize the code. There is plenty of room to improve the performance of our projects in the later stages of large projects.

To be continued…

Related articles

Front-end single-page application microservitization solution 1 – Thinking

Front-end single-page application microservitization solution 2-single-SPA

Front-end single page application microservitization solution 3 – Module loader

Front-end single page application microserver solution 4 – Message bus

Front-end single page application microservitization solution 5 – Routing distribution

Front-end single-page application microservitization solution 6 – Build and deploy

Front-end single-page application microservitization solution 7 – Static data sharing

Front-end single-page application microservitization solution 8 – Secondary build

Demo

Micro Frontend Demo

Micro front-end module loader

Micro front-end Base App example source code

Micro front-end sub-project example source code