前端微服务化解决方案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 示例源码

微前端子项目示例源码

微信公众号

本文链接:

https://alili.tech/archive/ce685b9f/

# 最新文章