受衆
希望將某個單一的單體應用，轉化爲多個可以獨立運行、獨立開發、獨立部署、獨立維護的服務或者應用的聚合，從而滿足業務快速變化及分佈式多團隊並行開發的需求的研發團隊。
什麼是微前端
微前端架構是一種類似於微服務的架構，它將微服務的理念應用於瀏覽器端，即將 Web 應用由單一的單體應用轉變爲多個小型前端應用聚合爲一的應用。各個前端應用可以獨立運行、獨立開發、獨立部署。
微前端的優勢
- 在同一頁面上使用多個前端框架 而不用刷新頁面 (React, AngularJS, Angular, Ember, 你正在使用的框架)
- 獨立部署每一個單頁面應用
- 新功能使用新框架，舊的單頁應用不用重寫可以共存
- 改善初始加載時間，遲加載代碼
微前端的幾種實現方式
- 路由分發式微前端
- 使用iFrame創建容器
- 自制框架兼容應用
- 組合式集成：將應用微件化
- 純Web Components技術構建
- 結合Web Components構建
- 在Web Components中集成現有框架
- 集成在現有框架中的 Web Components
- 複合型
複合型，就是針對實際的應用場景，選取上面的幾個類型挑幾種組合起來解決實際問題。
參考：https://www.jianshu.com/p/785c2ca5a886
這裏我們採用路由分發式前端，來看它的代表框架-qiankun。
入門
安裝
npm i qiankun -S
使用
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'reactApp',
entry: '//localhost:3000',
container: '#container',
activeRule: '/app-react',
},
{
name: 'vueApp',
entry: '//localhost:8080',
container: '#container',
activeRule: '/app-vue',
},
{
name: 'angularApp',
entry: '//localhost:4200',
container: '#container',
activeRule: '/app-angular',
},
]);
// 啓動 qiankun
start();
進階
微應用不需要額外安裝任何其他依賴即可接入 qiankun 主應用。
1.導出相應的生命週期鉤子
微應用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js) 導出 bootstrap、mount、unmount 三個生命週期鉤子，以供主應用在適當的時機調用。
/**
* bootstrap 只會在微應用初始化的時候調用一次，下次微應用重新進入時會直接調用 mount 鉤子，不會再重複觸發 bootstrap。
* 通常我們可以在這裏做一些全局變量的初始化，比如不會在 unmount 階段被銷燬的應用級別的緩存等。
*/
export async function bootstrap() {
console.log('react app bootstraped');
}
/**
* 應用每次進入都會調用 mount 方法，通常我們在這裏觸發應用的渲染方法
*/
export async function mount(props) {
ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}
/**
* 應用每次 切出/卸載 會調用的方法，通常在這裏我們會卸載微應用的應用實例
*/
export async function unmount(props) {
ReactDOM.unmountComponentAtNode(
props.container ? props.container.querySelector('#root') : document.getElementById('root'),
);
}
/**
* 可選生命週期鉤子，僅使用 loadMicroApp 方式加載微應用時生效
*/
export async function update(props) {
console.log('update props', props);
}
qiankun 基於 single-spa，所以你可以在這裏找到更多關於微應用生命週期相關的文檔說明。
無 webpack 等構建工具的應用接入方式請見這裏
2.配置微應用的打包工具
除了代碼中暴露出相應的生命週期鉤子之外，爲了讓主應用能正確識別微應用暴露出來的一些信息，微應用的打包工具需要增加如下配置：
webpack:
const packageName = require('./package.json').name;
module.exports = {
output: {
library: `${packageName}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${packageName}`,
},
};