前端單頁應用微服務化解決方案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/'));
});
複製代碼