前端微服务化解决方案8 - 二次构建

二次构建

进一步优化我们的微前端性能

在微前端这种形势的架构,每个模块都会输出固定的文件,比如之前说的:

• 项目配置文件
• Store.js 文件
• main.js 渲染入口文件

这三个,是微前端架构中每个模块必要的三个文件.

在模块加载器启动整个项目的时候,都必须要加载所有模块的配置文件与Store.js文件.
在前面的文章中有说 配置自动化的问题,这其实就是一种简单的二次构建.
虽然每一个模块的配置文件体积不是很大,但是每一个文件都会加载,是项目启动的必要文件.
每一个文件都会占一个http请求,每一个文件的阻塞都会影响项目的启动时间.

所以,我们的Store.js也必须是要优化的.
当然如果我们的模块数量不是很多的话,我们没有优化的必要.但是一旦项目变得更加庞大,有好几十个模块.
我们不可能一次加载几十个文件,我们必须要在项目部署之后,还要对整个项目重新再次构建来优化与整合我们的项目.

我们的Store.js 是一个amd模块,所以我们需要一个合并amd模块的工具.

Grunt or Gulp

像这样的场景,用grunt,gulp这样的任务管理工具再合适不过了.
不管这两个工具好像已经是上个世纪的东西了,但是他的生态还是非常完善的.用在微前端的二次构建中非常合适.

例如Gulp:

const gulp = require('gulp');
const concat = require('gulp-concat');
 
gulp.task('storeConcat', function () {
    gulp.src('project/**/Store.js')
        .pipe(concat('Store.js')) //合并后的文件名
        .pipe(gulp.dest('project/'));
});

像这样的优化点还有非常多,在项目发布之后,在二次构建与优化代码.
在后期庞大的项目中,是有很多空间来提升我们项目的性能的.

未完待续 ...

相关文章

前端微服务化解决方案1 - 思考

前端微服务化解决方案2 - Single-SPA

前端微服务化解决方案3 - 模块加载器

前端微服务化解决方案4 - 消息总线

前端微服务化解决方案5 - 路由分发

前端微服务化解决方案6 - 构建与部署

前端微服务化解决方案7 - 静态数据共享

前端微服务化解决方案8 - 二次构建

Demo

前端微服务化 Micro Frontend Demo

微前端模块加载器

微前端Base App示例源码

微前端子项目示例源码