2024.07 移动端微应用实践-模块联邦

移动端微应用-模块联邦-Module Federation

应用场景：公司要在移动端做一个工作台的页面，工作台分为几个模块：模块1、模块2、模块3，这三个模块分别属于不同的前端业务线，因此开发需要分开开发，然后工作台再对所有这些模块进行集成，使得页面看起来是一个整体。

调研：前期调研 乾坤和无界优缺点对比

• pc端我们使用的qiankun框架，需要子系统挨个进行接入，并且子系统新增的菜单需要配置是原生应用还是iframe应用，移动端照搬pc端这套会比较麻烦。
• wujie的方法本质是使用iframe，优点：接入简单；iframe本身的特性使得他本来就有隔离性；缺点：使用iframe父子应用之间的通信只能通过postMessage进行通信；无法保证子应用的状态
• Module Federation webpack中解释是多个独立的构建可以组成一个应用程序，这个独立的构建之间不存在依赖关系，可以单独开发和部署它们。本质是，子应用将打包结果给父应用，父应用通过动态import加载打包出的结果chunk

实践：

• 快速创建vite项目

npm init vite@latest

创建module-federation-child子应用和module-federation-child主应用

子应用处理

• 修改子应用内容App.vue改为

<script setup>
</script>

<template>
 <div>子应用内容</div>
</template>

<style scoped>
</style>

• 安装federation插件

npm i @originjs/vite-plugin-federation -D

• 修改vite.config.js配置，默认是使用esmodule方式，修改package.json文件type改为common.js，否则会报错

image-20240626195947016.png

// import { defineConfig } from 'vite'
// import vue from '@vitejs/plugin-vue'
const { defineConfig} = require('vite')
const vue = require('@vitejs/plugin-vue')
const federation = require('@originjs/vite-plugin-federation')

// https://vitejs.dev/config/
module.exports = defineConfig({
  base:"./",
  plugins: [
    vue(),
    federation({
      name: 'module-federation-child',
      filename: 'childEntry.js',
      // 需要暴露的模块
      exposes: {
        './ChildHome': './src/App.vue'
      }
    })
  ],
  build: {
    target: 'es2020', // 针对非行内样式，需要构建规格为 es2020，否则样式会失效，控制台给出提示
    minify: false,
    cssCodeSplit: false,
    rollupOptions: {
      output: {
        minifyInternalExports: false
      }
    }
  }
})

• 子应用运行npm run build打包结果

主应用处理

• 主应用App.vue

<script setup>
</script>

<template>
  <div>
    <div>父组件内容</div>
    <div class="child-box">
      
    </div>
  </div>
</template>

<style scoped>
.child-box {
  min-height: 20px;
  background: antiquewhite;
}
</style>

• 同样的方式修改package.json和vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const federation = require('@originjs/vite-plugin-federation')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),federation({
    name:"module-federation-demo",// 主应用名称
    remotes:{
      module_federation_child: 'http://127.0.0.1:5500/dist/assets/childEntry.js'// 引入远程模块，因为我是使用打包后的文件直接启动的所以入口文件写的带dist的路径
    },
    // 共享依赖
    shared:['vue']
  })],
  build: {
    // 假设有原生动态导入支持，并且将会转译得尽可能小
    target: ['chrome86','safari12'],
    // 启用混淆，减少模块体积
    minify: true,
    // 小于4096KB得引用资源将转为Base64，减少额外得HTTP请求
    assetsInlineLimit: 4096
  }
})

• 修改App.vue文件，异步引入组件

<script setup>
import { defineAsyncComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
// 加载组件
const ChildContent = defineAsyncComponent(() => {
  return import('module_federation_child/ChildHome')
})
</script>

<template>
  <div class="parant-box">
    <h3>父组件内容</h3>
    <div class="child-box">
      <ChildContent></ChildContent>
    </div>
  </div>
</template>

<style scoped>
.child-box {
  min-height: 20px;
  background: antiquewhite;
}
.parant-box{
  background-color: aquamarine;
  padding: 10px;
}
</style>

• 运行主应用展示效果如下

image-20240626200507603.png

缺点：这种情况下主应用和子应用的class有重名的时候会相互影响，因此建议每个应用的最外层的div容器都定义一个自己的id以免出现样式混乱（公共样式：比如公共组件库，每个文件里面如果都加了scoped则样式不会相互影响到）

数据交互

子应用和父应用之间单位维护自己的路由和状态，和独立应用开发方式没有差别，如果需要父子应用通信可以将公用的信息挂载在window上进行交互