qiankun 与 Web Components 的关系

qiankun 微前端框架的实现原理与 Web Components 的关系需要从技术实现层面进行拆解：

qiankun 的核心原理（不使用 Web Components）

javascript 复制代码

// 典型的 qiankun 应用注册方式
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'vue-app',
    entry: '//localhost:7101',
    container: '#subapp-viewport',
    activeRule: '/vue',
  },
  {
    name: 'react-app',
    entry: '//localhost:7102',
    container: '#subapp-viewport',
    activeRule: '/react',
  }
]);

start();

qiankun 的核心技术实现主要基于以下机制：

应用加载机制

使用 import-html-entry 库解析子应用 HTML
动态创建 <script> 标签加载 JS 资源
通过 eval 或 with 执行子应用代码

JS 沙箱隔离

javascript 复制代码

// 快照沙箱实现示例
class SnapshotSandbox {
  constructor() {
    this.proxy = window;
    this.modifyPropsMap = {};
  }

  active() {
    this.windowSnapshot = {}; 
    for (const prop in window) {
      this.windowSnapshot[prop] = window[prop];
    }
    Object.keys(this.modifyPropsMap).forEach(p => {
      window[p] = this.modifyPropsMap[p];
    });
  }

  inactive() {
    for (const prop in window) {
      if (this.windowSnapshot[prop] !== window[prop]) {
        this.modifyPropsMap[prop] = window[prop];
        window[prop] = this.windowSnapshot[prop];
      }
    }
  }
}

样式隔离方案

动态样式表（加载/卸载样式表）
实验性 Shadow DOM 支持（可选）

与 Web Components 的关系

非必要依赖

qiankun 的核心实现不依赖 Web Components
框架本身使用纯 JavaScript 实现应用隔离和通信

可选集成方式

javascript 复制代码

// 在 qiankun 中可选使用 Shadow DOM
export function renderContainer(container) {
  if (this.useShadowDOM) {
    if (!container.shadowRoot) {
      container.attachShadow({ mode: 'open' });
    }
    return container.shadowRoot;
  }
  return container;
}

设计理念差异

qiankun：应用级隔离（整个子应用）
Web Components：组件级封装（单个自定义元素）

技术方案对比表

特性	qiankun	Web Components
隔离级别	应用级	组件级
技术标准	框架实现	浏览器原生标准
样式隔离	动态样式表/前缀隔离	Shadow DOM
JS 隔离	代理沙箱	无自动隔离
通信机制	全局状态/事件总线	Custom Events
加载方式	动态脚本加载	自定义元素注册

混合使用场景

javascript 复制代码

// 在 qiankun 子应用中使用 Web Components
class MicroAppWrapper extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    // 使用 qiankun 的 loadMicroApp 加载子应用
    this.microApp = loadMicroApp({
      name: 'vue-micro-app',
      entry: '//localhost:7101',
      container: this.shadowRoot,
    });
  }

  disconnectedCallback() {
    this.microApp.unmount();
  }
}

customElements.define('micro-app-wrapper', MicroAppWrapper);

总结

qiankun 的核心原理不依赖 Web Components，而是通过 JavaScript 沙箱和动态资源加载实现微前端架构。但两者可以结合使用：

qiankun 提供应用级隔离和通信机制
Web Components 提供组件级封装能力
可通过 Shadow DOM 增强样式隔离（需手动启用）
适合需要混合使用不同技术方案的复杂场景