微前端的“航空母舰”：qiankun — 从入门到精通，驾驭前端巨轮的底层逻辑

一川_
128 阅读7分钟

引言：当“前端巨轮”遭遇冰山

想象一下，你正在驾驶一艘名为“超级电商平台”的巨轮。起初，它只是一艘小艇（一个简单的 SPA 应用）。但随着业务扩张，你不断地往船上加装新的船舱（业务模块）——用户中心、商品管理、订单系统、营销活动……

渐渐地，这艘船变得无比庞大：

  • 团队协作像在迷宫里工作，动一处而牵全身。
  • 技术栈被锁死，无法尝试新的框架。
  • 每次发布都像一次冒险，一个小 Bug 可能导致整船瘫痪。

这，就是“前端巨石应用”的噩梦。而 微前端，就是为了将这艘巨轮，拆解为一支由众多独立小艇（微应用）组成的、统一指挥的航母舰队。

今天，我们要介绍的就是这支舰队的核心——qiankun，一艘功能强大的“航空母舰”。

deepseek_mermaid_20251104_4a8acd.png （图解：qiankun 作为主应用（航母），负责调度和集成各个独立的微应用（舰载机）。）

一、初识 qiankun：它到底是什么？

qiankun（乾坤）  是一个基于 single-spa 的微前端实现库。它来源于蚂蚁集团，旨在让前端开发更像“搭积木”。

你可以用一句简单的话理解它：

qiankun 能让你在一个“主应用”中，无缝地加载和运行另一个独立开发的“子应用”，并且让它们看起来像一个完整的应用。

核心角色扮演：

  1. 主应用 (基座) ：就像航母的甲板和指挥塔。它负责：

    • 整个应用的布局和导航。
    • 根据 URL 或其他规则，决定何时、何处加载哪个微应用。
    • 提供全局的公共依赖（如 UI 库、工具函数）。

  2. 微应用 (子应用) ：就像停靠在航母上的各式舰载机（战斗机、预警机、运输机）。它们：

    • 独立开发、独立部署。可以用 React、Vue、Angular 甚至 jQuery 开发。
    • 拥有自己的仓库、技术栈和发布流程。
    • 在运行时被主应用“动态”地加载进来。

deepseek_mermaid_20251104_4b3a57.png （图解：用户访问主应用，主应用根据路由匹配，动态加载并渲染对应的微应用。）

二、揭秘 qiankun 的底层逻辑：魔法是如何实现的？

qiankun 的魔力并非黑盒，其核心在于三大“法宝”：应用加载、JS 沙箱 和 样式隔离。

法宝一：应用加载 — “凭空造物”的 import-html-entry

qiankun 并没有要求你的微应用打包成某种特殊格式。它使用了一个非常聪明的策略：直接解析微应用的 HTML 入口文件。

// 伪代码逻辑示意
async function loadApp() {
  // 1. 拉取微应用的 index.html
  const html = await fetch('//localhost:7100/index.html').then(response => response.text());

  // 2. 解析 HTML，提取出其中的 JS 和 CSS 链接
  const scripts = parseScripts(html); // [‘static/js/bundle.js’, ‘static/js/chunk.js’]
  const styles = parseStyles(html); // [‘static/css/main.css’]

  // 3. 动态创建 <style> 和 <script> 标签，将资源加载到主应用页面中
  styles.forEach(styleUrl => loadStyle(styleUrl));
  scripts.forEach(scriptUrl => loadScript(scriptUrl));
}

这个过程就像是一个“资源搬运工”，把微应用需要的所有“零件”（JS、CSS）搬到了主应用的“车间”里进行组装。

法宝二：JS 沙箱 — “楚门的世界”

这是 qiankun 最精妙的部分。想象一下，如果多个微应用都直接操作全局的 window 对象，比如都设置了 window.userName，必然会天下大乱。

qiankun 的 JS 沙箱为每个微应用创造了一个“虚假的”全局环境。

  • 快照沙箱：适用于不支持 Proxy 的浏览器。在微应用加载前，对当前的 window 对象拍一张“快照”。当微应用卸载时，再恢复到这个快照，擦除微应用期间做的所有修改。
  • 代理沙箱 (ProxySandbox) ：更现代、性能更好的方式。它使用 Proxy 为每个微应用创建一个假的 window 对象（我们称之为 fakeWindow）。微应用对“全局变量”的读写操作，实际上都是在操作这个 fakeWindow，不会污染到真正的 window。
// 伪代码逻辑示意
class ProxySandbox {
  constructor() {
    this.fakeWindow = {};
    const proxy = new Proxy(this.fakeWindow, {
      set: (target, prop, value) => {
        target[prop] = value; // 写入假的 window
        return true;
      },
      get: (target, prop) => {
        // 优先从假的 window 里读，读不到再从真的 window 里读
        return prop in target ? target[prop] : window[prop];
      }
    });
    this.proxy = proxy;
  }
}

// 微应用的代码在这个 proxy 环境中运行
microAppWindow.proxy.userName = 'Micro App User'; // 操作的是 fakeWindow
console.log(window.userName); // 仍然是主应用的，未被污染

deepseek_mermaid_20251104_e9183e.png （图解：微应用 A 和 B 各自拥有自己的沙箱环境，对全局变量的修改互不干扰。）

法宝三：样式隔离 — “我的地盘我做主”

为了避免微应用之间的 CSS 样式互相覆盖，qiankun 提供了两种隔离方案：

  • 严格样式隔离 (Shadow DOM) ：为微应用的容器包裹一层 Shadow DOM。这实现了真正的隔离，微应用内部的样式完全不会泄露到外部，外部的样式也进不来。但可能对某些 UI 库的弹窗等组件不友好。
  • Scoped CSS：qiankun 会自动为微应用的所有样式规则添加一个特殊的选择器前缀，类似于 vue 的 scoped 或 CSS Modules 的效果，从而实现了样式的隔离。

三、qiankun 的核心特点与优势

了解了底层逻辑，它的优势就一目了然了：

  1. 技术栈无关：主应用和微应用可以使用不同的前端框架，真正实现了“百花齐放”。
  2. 独立开发与部署：各个团队可以独立开发、测试和部署自己的微应用，释放团队效能。
  3. 增量迁移：对于老旧的巨型系统，可以逐一将功能模块用新技术重构为微应用，平滑迁移，降低风险。
  4. 运行时集成：微应用是动态运行时加载的，而不是在编译时合并，这给了我们极大的灵活性。
  5. 性能与体验优化：结合懒加载，可以极大提升首屏速度。同时，qiankun 也提供了应用间通信机制，让微应用之间可以优雅地“对话”。

四、一个极简的代码示例

光说不练假把式，让我们看看用 qiankun 有多简单。

主应用 (React) 配置：

// main-app/src/App.js
import { registerMicroApps, start } from 'qiankun';

// 1. 注册微应用
registerMicroApps([
  {
    name: 'react-app', // 微应用名称
    entry: '//localhost:7100', // 微应用的 HTML 入口地址
    container: '#subapp-container', // 微应用挂载的节点
    activeRule: '/react', // 激活路径（当URL以/react开头时，加载这个微应用）
  },
  {
    name: 'vue-app',
    entry: '//localhost:7101',
    container: '#subapp-container',
    activeRule: '/vue',
  },
]);

// 2. 启动 qiankun
start();

// 主应用组件
function App() {
  return (
    <div>
      <h1>主应用导航栏</h1>
      <div id="subapp-container"></div> {/* 微应用将在这里渲染！ */}
    </div>
  );
}

微应用 (以 Vue 为例) 配置：

微应用不需要安装 qiankun，只需要在自己的打包配置（如 vue.config.js）中暴露三个生命周期钩子函数。

// vue-app/vue.config.js
module.exports = {
  devServer: {
    port: 7101,
    headers: {
      'Access-Control-Allow-Origin': '*', // 允许主应用跨域加载资源
    },
  },
  configureWebpack: {
    output: {
      library: `vue-app`, // 微应用名称
      libraryTarget: 'umd', // 将微应用打包成 umd 库格式
    },
  },
};

// vue-app/src/main.js
import Vue from 'vue';
import App from './App.vue';

let instance = null;

function render(props = {}) {
  const { container } = props; // 主应用传过来的容器
  instance = new Vue({
    render: h => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app'); // 挂载到自己的节点或主应用指定的节点
}

// 独立运行时，直接渲染
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

// 导出 qiankun 需要的生命周期钩子
export async function bootstrap() {
  console.log('vue app bootstraped');
}
export async function mount(props) {
  console.log('vue app mount', props);
  render(props); // 主应用加载微应用时，调用 mount 方法
}
export async function unmount() {
  console.log('vue app unmount');
  instance.$destroy(); // 主应用卸载微应用时，调用 unmount 方法
  instance = null;
}

五、总结与展望

qiankun 通过其巧妙的设计，将复杂的微前端概念落地为一套简单易用的解决方案。它就像前端架构中的“粘合剂”，让一个个独立的现代化应用能够组合成一个强大而统一的整体。

当然，它并非银弹，在带来巨大灵活性的同时，也带来了新的挑战：应用间通信的复杂度、公共依赖的共享、统一的用户体验规范等。但这些挑战，在它带来的巨大收益面前，都是可以管理和克服的。

如果你正受困于巨石应用的泥潭，或者正在规划一个未来可扩展的大型前端平台，那么 qiankun 无疑是你的技术武库中一件不可或缺的利器。

现在，是时候驾驭这艘“微前端航母”，带领你的团队驶向更广阔的前端海域了！

avatar
文章
阅读
粉丝