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

2018-09-07

二次构建

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

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

项目配置文件
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

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

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