webpack5的模块联邦ModuleFedaration最佳实践前言模块联邦也称为ModuleFedaration，

前言

模块联邦也称为ModuleFedaration，是webpack5的新特性，能够很好的解决模块依赖复用问题。多个独立构建的应用，他们之间的模块互不影响，可以独立开发、独立部署，也可以做为一个独立的子应用。

目前主流的微前端框架有：乾坤、microApp等，当在做技术栈迁移的时候能够很好的解决大量改动的问题，还无关技术栈、样式隔离好处就不多说了，大家可以自行查看微应用相关。但是如果每个应用中有重复的依赖，或者想要复用某个公共的脚本或者某个小组件等不是很友好，毕竟微应用的拆分也不能够过于细，vue的首屏加载什么的都很慢。

？问题：在主应用中要加载有好几个子应用，相同的依赖会被多次请求，这样就很费资源，怎么做到资源共享？

？解决：webpack5的（ModuleFederationPlugin）模块联邦插件就能够做到，但是发现在使用过程中还是有一些坑需要躺，花了几天时间研究了一下

ModuleFederation官方文档

一、实例场景说明

1、 app1和app2都为提供方

2、 consumer为消费方，消费app1和app2提供的组件

二、模块联邦的使用

1、app1提供方配置

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: 'http://localhost:9000',
  devServer: {
    port: 9000,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
    },
  },
  configureWebpack:{
    optimization: { splitChunks: false, minimize:false},
    plugins:[
      new webpack.container.ModuleFederationPlugin({
        name: "app1",
        filename: "remoteEntry.js",
        library: { type: "var", name: "app1" },
        exposes: {
          "./HelloWorld": "./src/components/HelloWorld",
        },
        shared: {
          'vue':{
            singleton: true, 
          },
          'moment':{
            singleton: true,
          }
        },
      }),
    ]
  }
})

2、consumer消费方配置

const { defineConfig } = require('@vue/cli-service');
const webpack = require('webpack')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: 'auto',
  configureWebpack: {
    optimization: {
      splitChunks: false,
    },
    plugins: [
      new webpack.container.ModuleFederationPlugin({
        name: 'consumer',
        filename: 'remoteEntry.js',
        remotes: {
          app1: 'app1@http://localhost:9000/remoteEntry.js',
          app2: 'app2@http://localhost:9000/remoteEntry.js',
        },
        shared: {
          'vue':{
            singleton: true, 
          },
          'moment':{
            singleton: true,
          }
        },
      }),
    ],
  },
})

3、消费方和配置方入口文件改为异步【重要】

1）、增加一个文件bootstrap.js【文件名称可自定义】，将main.js中的代码原本的拷入

2）、main.js中改为动态引入

4、slitChunks必须改为false

optimization: { splitChunks: false },

5、消费方Host使用提供方Remote暴露的组件

注意需要采用异步的方式引入

<template>
  <div id="app">
    <h1>消费方</h1>
    <SectionT/>
    <HelloWorld/>
  </div>
</template>

<script>
export default {
  components: {
    SectionT: () => import('app2/SectionT'),
    HelloWorld: () => import('app1/HelloWorld'),
  },
}
</script>