qiankun 微前端的一些总结

date
Feb 7, 2023
slug
qiankun
status
Published
tags
微前端
summary
type
Post
中 M微前端是基于 JS Entry和 qiankun这种区别比较大，今天有空看看 qiankun具体是怎么做。
路由特点
基于 Single-Spa，路由机制核心围绕「路由劫持 / 监听」实现子应用的加载、切换、卸载。主应用仅做路由监听和调度，子应用拥有独立的路由系统，本质是多应用的路由协同。
分 history和 hash两种模式，history中监听 popstate实现各应用间跳转，一般 会pushState/replaceState方法，达到监听所有history方法。
 
HTML Entry vs JS Entry
 
样式隔离
  1. scoped css,为每个 子应用添加样式前缀
  1. 如需更彻底的隔离，可手动开启 Shadow DOM 模式，qiankun 会自动将子应用挂载到 Shadow Root 中。
  • 若子应用有依赖全局 DOM 的逻辑（如 document.body.appendChild），需适配 Shadow DOM（通过 shadowRoot 替代 document）；
  • IE 浏览器不支持 Shadow DOM，需做好降级。
 
样式存在的一些问题
  • 子应用全局样式仍污染主应用：
    • 原因：qiankun 的自动前缀对 body/html 等根选择器的处理有限；
    • 解决：子应用尽量避免写全局样式，或手动给全局样式添加前缀，如：
        • css
        /* 子应用内推荐写法 */ .app1-wrapper body { background: #fff; }
  • Shadow DOM 下第三方库样式失效：
    • 原因：第三方库样式挂载到 document.head，不在 Shadow DOM 内；
    • 解决：qiankun 提供了 appendCssLinkToShadowDom 配置，自动将样式注入 Shadow Root：
        • javascript
        运行
        sandbox: { strictStyleIsolation: true, appendCssLinkToShadowDom: true, // 自动将子应用 CSS 注入 Shadow DOM }
  • 主应用样式覆盖子应用：
    • 原因：主应用样式优先级高于子应用自动前缀样式；
    • 解决：子应用样式添加 !important（谨慎使用），或主应用给全局样式添加作用域限制。
 
js隔离
 

© yujun 2021 - 2026