1. 什么是微前端

就是将不同的功能按照不同的维度拆分成多个子应用，通过主应用（基座）来加载这些子应用

2. 使用微前端可以解决以下问题：

不同团队间开发同一个应用技术
每个团队可以独立开发，独立部署
不影响项目中老的代码
基于以上问题可以将一个应用划分成若干子应用，将子应用打包成一个个的库，当路径切换的时候加载不同的子应用。这样每个子应用都是独立的，对技术栈没有限制，从而解决了不同团队协同开发的问题

3. 实现原理

路由劫持
沙箱隔离
应用加载
生命周期

路由劫持：

由于pushState和replaceState会导致路由的变更，但不会触发对应的事件，所以会重写逻辑来主动触发处理

沙箱隔离：

一个网页主要由js,html,css三部分组成，如果这三者在同一个上下文中执行，那么不可避免的会产生各种冲突,因此需要一个沙箱机制来隔离冲突

js隔离

js隔离： js沙箱proxy 快照沙箱

<script>
        class SnapshotSandbox{
            constructor(){
                this.proxy = window  // window的属性
                this.modifypropsMap = {}  // 记录在window上的修改
                this.active()
            }
            active(){
                this.windowSnapshot ={};  // 拍照
                for(const prop in window){
                    if(window.hasOwnProperty(prop)){
                        this.windowSnapshot[prop] = window[prop]
                    }
                }
                Object.keys(this.modifypropsMap).forEach((p) =>{
                    window[p] = this.modifypropsMap[p]
                })
            }
            inactive(){
                for(const prop in window){
                    if(window.hasOwnProperty(prop)){
                        if(window[prop] !== this.windowSnapshot[prop]){
                            this.modifypropsMap[prop] = window[prop]
                            window[prop] = this.windowSnapshot[prop]
                        }
                    }
                }
            }
        }
        let sandbox = new SnapshotSandbox();
        (
            (window)=>{
                window.a = 1;
                window.b = 2;
                console.log(window.a,window.b);
                sandbox.inactive();
                console.log(window.a,window.b);
                sandbox.active();
                console.log(window.a,window.b);
            }
        )(sandbox.proxy)
    </script>

css隔离

Dynamic Stylesheet 动态样式表，当应用切换时移除老的应用样式，添加新的应用样式（子应用之间的样式隔离）

主应用与子应用之间的样式隔离

BEM
CSS-Modules
Shadow DOM
css-in-js

生命周期

以single-spa为例：

微前端指南