qiankun学习笔记

微前端

技术栈

发布日期: 2023-09-22

文章字数: 599

阅读时长: 2 分

qiankun学习笔记

微前端

第一步，解决了什么痛点:

大应用拆分
渐进式技术栈升级

附带优势:
多团队合作，独立部署
技术栈无关

第二步，实现了什么功能:

沙箱:CSS隔离，JS隔离，路由隔离
微应用调度

第三步，如何实现沙箱和微应用调度….

qiankun: 实现沙箱，实现微应用接入配置简化，无痛接入
singleSpa: 实现基于路由进行微应用调度，定义了微应用生命周期
systemJS: 实现动态加载模块

Why Not Iframe

iframe 优势是能完美解决样式隔离、js 隔离, 劣势是无法突破这些隔离.

路由隔离. 例如: 刷新丢失URL,无法前进后退

UI隔离,DOM结构不共享,无法合并计算样式. 例如: iframe内弹出的弹出,要求遮罩居中随浏览器Resize

全局上下文隔离，内存变量不共享 例如: 无法数据状态同步, iframe设置的cookie会被视为第三方cookie, 被浏览器禁止.

慢每次进入都须重新加载资源, 重建浏览器上下文

Why Not Iframe

qiankun使用


registerMicroApps([
    {
        name: 'reactApp',
        entry: '//localhost:40000', // 默认react启动的入口是10000端口
        activeRule: '/react', // 当路径是 /react的时候启动
        container: '#container', // 应用挂载的位置
        loader, // 微应用加载时触发钩子
        props: { a: 1, util: {} } // 可传给微应用生命周期的属性
    },
    {
        name: 'vueApp',
        entry: '//localhost:20000', // 默认react启动的入口是10000端口
        activeRule: '/vue', // 当路径是 /react的时候启动
        container: '#container', // 应用挂载的位置
        loader,
        props: { a: 1, util: {} }
    }
], {
    // qiankun的生命周期钩子，作用不大
    beforeLoad() {
        console.log('before load')
    },
    beforeMount() {
        console.log('before mount')
    },
    afterMount() {
        console.log('after mount')
    },
    beforeUnmount() {
        console.log('before unmount')
    },
    afterUnmount() {
        console.log('after unmount')
    }
})
// start可以传入一些额外的配置
start()