近期陆陆续续基于 Fes.js 微前端实现了几个巨石应用的新增需求，总结一下这么去玩的流程和推荐方案～对于老项目使用 Fes.js 微前端如何迁移，可以扒一扒 这篇 文章。
1.如何规划微应用、主应用
通常拿到新需求，做需求拆分时，我们就会根据需求的独立性、可复用性、使用场景和项目现技术栈几个角度考虑是否可以用、需要用微前端实现。那对于使用微前端实现的项目，一般规划如下：
代码库及结构
主应用、微应用各自独立的代码库。通常，微应用代码库建议以主应用代码库-micro命名。
- 简单微应用：微应用代码库内部的 src/pages/ 下每个文件为一个独立微应用。
- 复杂/通用微应用：如果一个微应用需要被多个主应用引用，且多个主应用之间数据处理差异较大，一个更好的处理方式是在 src/pages/ 下根据主应用创建不同的微应用路由入口，并在路由入口处抹平数据差异，最后统一在 src/components/ 通用组件处理相同逻辑。
![4c02e57f917d49068967f24cb2dc0226XXX3157B.png]()
技术栈
微前端的核心是技术栈无关，微应用、主应用使用自己的技术栈独立开发。
- 微应用: Fes.js、Vue3、UI 组件库自选（Fes UI 敬请期待中～）
- 主应用: 老项目原有技术栈无需变更，新项目推荐 Fes.js 。
微应用接入主应用
- 由于技术栈无关，所以微应用接入是一个协议接入。微应用不需要额外安装任何其他依赖，只需要在自己的入口 js 导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。
主应用加载微应用
打包、部署、更新
- 打包: 主应用、微应用各自独立打包，完全解耦。
- 部署: 主应用、微应用各自独立部署，互不影响，更有利于独立迭代。
- 更新: 主应用、微应用各自独立更新。对于仅涉及微应用的更新，微应用部署完成后（所有引用它的）主应用自动完成同步更新。
2.微应用相关
基于 Fes.js 如何开发微应用，官方文档和上面 🔗 文章都有写，十分清楚啦～这里着重讨论一下关于微应用的样式隔离，这趴我们内部项目是踩了一些坑的，也讨论过最佳实践，这里完整总结一下。
微应用样式隔离最佳实践
1. qiankun Shadow DOM:
qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响。Shadow DOM 大部分情况下都需要主应用做一些适配后才能正常在 Shadow DOM 中运行起来。需要适配的点跟项目相关联，很具有未知性，成本较大！
2. qiankun experimentalStyleIsolation: true
当 experimentalStyleIsolation 设置为 true 时，编译后会给微应用的 最外层容器 添加一个特殊选择器，并将这个特殊选择器添加到所有样式规则上，来限定微应用样式影响范围。无法解决“主应用与微应用有同名选择器”情况下的样式污染。
3. BEM
通过一些 约定 (如统一加微应用前缀) 来避免冲突，比较有效的方案。强依赖约定。
4. scoped CSS【推荐】
scoped 的原理是生成一个 data-v-[hash] 形式的data属性选择器作为唯一标识，在编译后生成的每句 css 选择器的末尾加一个当前元素的"data属性选择器"来私有化样式。这样局部样式可以做到极大程度上避免样式冲突，但也无法解决方案2的问题。
5. css Module【推荐】
css Module 会根据 文件名+类名+hash 生成一个唯一标识，然后直接替换掉原类名，比 scoped 更为彻底。这样只要不直接通过标签选择器去修改样式，基本可以做到完全避免冲突。当前 css module 已经是非常成熟一种做法，通过在构建工具里加一些 css 预处理器即可实现。如果是基于 Fes.js 的微应用，则更无需关心任何额外配置，直接在代码里面使用即可，其他工序都暗戳戳帮你搞定啦～
![企业微信截图_9c6358dd-15c0-4118-8026-dbc118a88b0b.png]()
![企业微信截图_bfd96002-c051-4698-bab3-ff1755578d10.png]()
3.主应用相关
主应用相关的主要讲一下 如何加载、如何通讯 两个方面。
主应用如何加载微应用？
在主应用加载微应用，在主应用封装一个 microCommon 组件, 来统一处理加载、通讯、微应用 unmount 等逻辑，然后在主应用按需引入 microCommon。以一个基于 vue2 的主应用为例，通过上面【主应用加载微应用】第2种类型接入微应用。
1. 实现 microCommon.vue 组件
<template>
<div></div>
</template>
复制代码
import { loadMicroApp } from 'qiankun';
export default {
props: {
microName: String,
microContainer: String,
microEntry: String,
microPropsUrl: String
},
data() {
return {
microApp: null
};
},
mounted() {
this.microApp = loadMicroApp({
name: this.microName,
container: `#${this.microContainer}`,
entry: `${this.microEntry}`,
props: {
url: this.microPropsUrl
}
});
},
async beforeDestroy() {
if (this.microApp) {
const status = this.microApp.getStatus();
if (status === 'MOUNTED') await this.microApp.unmount();
}
return Promise.resolve();
}
};
复制代码
2. 主应用引用 microCommon 组件：
<template>
<div id="materialManage_materialEditing">
<micro-common
:microName="'materialManageEditing'"
:microContainer="'materialManage_materialEditing'"
:microEntry="'/s/web-mas-micro/'"
:microPropsUrl="'/materialManage/materialEditing'"
></micro-common>
</div>
</template>
复制代码
import MicroCommon from '@/components/microCommon';
export default {
components: {
MicroCommon
}
};
复制代码
主应用如何与微应用通讯？
1. 基于 props 通讯
在 qiankuan loadMicroApp API 有详细关于 props 传参的示例，并结合 initGlobalState API 实现传递数据的更新和管理。除了参数，方法也可以通过 props 传入微应用使用。
2. Fes.js 最佳实践：基于 useModel 通讯
基于该通讯方式，子应用获取 props 的方法是相同的，子应用中会自动生成一个全局名为 qiankunStateFromMain 的 model，可以在任意组件中获取主应用传递的 props 的值。主应用的传递 props 方式有所差异：
- 基于 Fes.js 的主应用：按照 @fesjs/plugin-qiankun 文档指引区分不同微应用引入方式传递 props。
- 其他技术栈的主应用：通过 loadMicroApp API 传递 props。
