二次构建
进一步优化我们的微前端性能
在微前端这种形势的架构,每个模块都会输出固定的文件,比如之前说的:
- 项目配置文件
- 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/'));
});
像这样的优化点还有非常多,在项目发布之后,在二次构建与优化代码.
在后期庞大的项目中,是有很多空间来提升我们项目的性能的.
未完待续 ...
网友评论