微前端概念 - 技术栈

微前端作用

大型应用程序的拆分
独立的前端子应用
降低程序复杂性，提高开发效率

微前端能力

js隔离
css隔离
元素隔离
生命周期
预加载
数据通信
应用跳转
多层嵌套
...

微前端实现方案

Iframe
Single-spa
Qiankun
Micro-app

Iframe

javascript 复制代码

<iframe src="https://www.example.com" sandbox></iframe>

简单易用
天然沙箱
隔离太完美
刷新即丢失

Single-spa

javascript 复制代码

import { registerApplication } from 'single-spa'

registerApplication({
  name:'app',
  app: () => {
    loadScripts('./chunk-a.js');
    loadScripts('./chunk-b.js');
    return loadScripts('./entry.js')
  }
})

singleSpa.start()

微前端构架鼻祖
改造成本太大
沙箱不完美
应用通信能力差
等等

Qiankun

html entry
更完备的沙箱方案
适配成本高
不支持 vite

Micro-app

低侵入式
文档易读
更好的兼容性
支持 vite

现代微前端架构理念

团队自治跨多团队合作开发困难
核心思想开发、部署成本
场景落地系统的渐进性、动态性

传统代码提交流程

微前端代码提交流程

核心思想：

Micro-app

本质

借鉴了WebComponent的思想，通过CustomElement结合自定义的ShadowDom,将微前端封装成一个类WebComponent组件，从而实现微前端的组件化渲染。

WebComponent: 原生组件
CustomElement: 自定义元素
ShadowDom: 影子DOM

工作原理

整体架构思路为：CustomElement + HtmlEntry

micro-app标签：上可以设置各种配置，比如开启iframe沙箱、开启ssr模式、开启keep-alive模式、关闭沙箱、数据通信。
HTMLEntry: 就是以html文件作为入口地址进行渲染

如何使用

主要功能

生命周期、环境变量、虚拟路由、JS沙箱、样式隔离、元素隔离、数据通信、等等

生命周期

created:

javascript 复制代码

<micro-app> 标签初始化后，加载资源前触发。

beforemount: 加载资源完成后，开始渲染之前触发
mounted: 子应用渲染结束后触发
unmount: 子应用卸载时触发

环境变量

 - _MICRO_APP_PUBLI_PATH_
 - _MICRO_APP_BASE_ROUTE_

虚拟路由系统

通过虚拟路由系统，我们可以方便的进行导航守卫、跨应用的跳转、提升开发效率、并且子应用运行在这套虚拟路由系统中，和主应用的路由进行隔离，避免相互影响，如：

主应用控制子应用跳转
子应用控制主应用跳转
子应用控制其他子应用跳转

JS沙箱

确保子应用之间全局变量/事件不冲突

样式隔离

元素隔离

元素隔离的概念来自ShadowDom,即ShadowDom中的元素可以和外包的元素重复但不会冲突，micro-app模拟实现了类似ShadowDom的功能，元素不会逃离<micro-app 元素边界，子应用只能对自身的元素进行增、删、改、查的操作。

数据通信

主子应用间通信
子应用全局通信

其他能力

预加载、缓存等等

兼容性

技术栈： Vue、React、Angular、Nuxt、Next
构建工具：Webpack、Vite、Vue-cli
浏览器：PC端：除了IE浏览器，其他浏览器基本兼容，移动端：ios10+、android5+

Micro-app接入注意

子应用跨域：Webpack、Vite
样式隔离：约定前缀、命名空间
官方网站：https://micro-zoe.github.io/micro-app/

构建micro-app基座（以vue3为基座）

javascript 复制代码

// 初始化vue3项目 以vue3为基座
npm init vue@latest
// 下载vue-router
npm install vue-router@4.0.12 --save