vue + webpack + ModuleFederation的dev serve 方案（动态加载资源）

使用模块联邦简单搭建的项目在开发的时候需要将所有模块进行启动，才能保证项目正常访问，这无疑是很麻烦的，且很消耗电脑资源的一种方式，所以会考虑是否只启动开发的应用，其他应用加载静态资源。接下来分享我使用的 dev serve 方案。

远程模块加载

webpack 提供通过 url 和 promise 两种方式来进行加载，接下来介绍下这两种方式是如何使用的。

url方式加载远程模块

webpack 配置如下

webpack.config.js

js 复制代码

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      remotes:{
          app:"http://xxx/remoteEntry.js"
      }
    }),
  ],
};

这么配置会有一个问题，就是在打包部署后，又单独更新的app模块，当浏览器在更新前访问过，已经有 http://xxx/remoteEntry.js 的缓存，就会导致加载不到新更新的app，必须强制清缓存。所以需要保证 http://xxx/remoteEntry.js 不缓存，每次都加载最新的。

优点：代码中配置简单
缺点：需要修改服务器配置(nginx/cdn)，当模块过多，模块的入口文件不进行缓存，会导致页面初始化慢一点

promise方式加载远程模块（我使用的方式）

之所以要考虑使用promise的方式加载远程模块，就是既要保证线上运行时能够加载到最新的模块代码，又要使用浏览器的缓存机制最大的提升页面访问速度。

模块加载方法

js 复制代码

window.__LOAD_MODULE_PROMISE__ = (module) => {
  return (resolve, reject)=>{
    if(!window.__APP_VERSIONS__) window.__APP_VERSIONS__ = {};
    if(!window.__APP_VERSIONS__[module]) window.__APP_VERSIONS__[module] = Date.now();
    import((window.location.origin)+"/app/"+module+"/remoteEntry.js?_v="+ window.__APP_VERSIONS__[module]).then(resolve).catch(reject);
  }
}

webpack.config.js

js 复制代码

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      remotes:{
          app:"promise new Promise(window.__LOAD_MODULE_PROMISE__('app'))"
      }
    }),
  ],
};

可以看到，在模块加载的时候，在加载路径上会拼接模块的版本，来保证模块更新后，浏览器也会加载到最新版本的模块代码。全局的模块版本配置会随着模块的更新而同步更新。

主代理服务

主代理服务是一个简单的代理服务，没有业务代码，其中主要是代理逻辑的配置，我使用的代理规则如下：

访问dev-server服务
访问本地模块打包后的静态代码
访问远程开发环境部署的模块代码
报错

实现以上规则的话需要做如下工作：

模块静态资源

将模块打包后的静态资源存放在主代理服务中，在代理启动后，即使不启动任何一个模块服务，也可以访问项目。

模块dev-serve配置

动态端口

dev-server中的端口不静态写死，在启动的服务的时候动态获取到一个空闲的端口，进行启动。

服务广播

dev-server支持 bonjour，使用 bonjour 可以实现服务发现的逻辑，让主代理服务自动发现正在运行的模块服务及对应的服务端口，方便进行代理转发

webpack.config.js

js 复制代码

module.exports = {
    devServer: {
      bonjour: {
        type: "app", // app | container 自己定义的容器或应用，和模块联邦无关
        name: "app-a"
      },
      ...
    }
}

proxy

使用bonjour进行监听服务启动，做对应的代理注册/取消代理

js 复制代码

const bonjourClient = require('bonjour')();
const appBrowser = bonjourClient.find({type: 'app'})
appBrowser.on('up',  function(service){
  //...
  // const {type, name, port} = service
});
appBrowser.on('down',  function(service){
  //...
});

const containerBrowser = bonjourClient.find({type: 'container'})
containerBrowser.on('up',  function(service){
  //...
});
containerBrowser.on('down',  function(service){
  //...
});

代理服务中还有对对静态文件的代理，以及对远程服务的代理，这两块就不一一举例了，实现时主要就是用 express + http-proxy-middleware 来实现的，使用cli-table3 做了下终端代理状态展示。