移动端微应用-模块联邦-Module Federation
应用场景：公司要在移动端做一个工作台的页面，工作台分为几个模块：模块1、模块2、模块3，这三个模块分别属于不同的前端业务线，因此开发需要分开开发，然后工作台再对所有这些模块进行集成，使得页面看起来是一个整体。
调研：前期调研 乾坤和无界优缺点对比
- pc端我们使用的
qiankun框架，需要子系统挨个进行接入，并且子系统新增的菜单需要配置是原生应用还是iframe应用，移动端照搬pc端这套会比较麻烦。 -
wujie的方法本质是使用iframe，优点：接入简单；iframe本身的特性使得他本来就有隔离性；缺点：使用iframe父子应用之间的通信只能通过postMessage进行通信；无法保证子应用的状态 -
Module Federationwebpack中解释是多个独立的构建可以组成一个应用程序，这个独立的构建之间不存在依赖关系，可以单独开发和部署它们。本质是，子应用将打包结果给父应用，父应用通过动态import加载打包出的结果chunk
实践：
npm init vite@latest
创建module-federation-child子应用和module-federation-child主应用
子应用处理
- 修改子应用内容
App.vue改为
<script setup>
</script>
<template>
<div>子应用内容</div>
</template>
<style scoped>
</style>
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上进行交互
