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

时间 2019-11-21

标签前端单页应用微服解决方案二次构建繁體版

原文原文链接

文章转发自 alili.tech前端

二次构建

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

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

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

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

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

因此,咱们的Store.js也必须是要优化的. 固然若是咱们的模块数量不是不少的话,咱们没有优化的必要.可是一旦项目变得更加庞大,有好几十个模块. 咱们不可能一次加载几十个文件,咱们必需要在项目部署以后,还要对整个项目从新再次构建来优化与整合咱们的项目.frontend

咱们的Store.js 是一个amd模块,因此咱们须要一个合并amd模块的工具.前端性能

Grunt or Gulp

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

例如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/'));
});
复制代码