微前端 qiankun@2.10.5 源码分析（一）

微前端 qiankun@2.10.5 源码分析（一）

前言

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. – Micro Frontends

微前端架构具备以下几个核心价值：

• 技术栈无关
  主框架不限制接入应用的技术栈，微应用具备完全自主权

• 独立开发、独立部署
  微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

• 增量升级

  在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

• 独立运行时
  每个微应用之间状态隔离，运行时状态不共享

微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。-- qiankun 官网

哈哈，其实目前我自己公司团队也存在上面说的一些问题，希望能够通过源码的分析研究从中得到一些灵感，对现有项目进行一些改造，打造符合自己的微前端生态。

安装

这里用的是 qiankun@2.10.5 版本。

执行以下命令安装 qiankun 源码:

$ git clone https://github.com/umijs/qiankun.git
$ cd qiankun

安装并运行:

$ yarn install
$ yarn examples:install
$ yarn examples:start

打开 http://localhost:7099 看效果：

开始

第一步：初始化应用

找到 examples/main/index.js 文件的第 15 行：

/**
 * Step1 初始化应用（可选）
 */
render({
   
   loading: true});
const loader = (loading) => render({
   
   loading});

可以看到，调用了 render 方法，然后创建了一个 loader，我们重点看一下 render 方法。

找到 examples/main/render/VueRender.js 文件：

import Vue from 'vue/dist/vue.esm';

function vueRender({
    
     loading }) {
   
   
  return new Vue({
   
   
    template: `
      <div id="subapp-container">
        <h4 v-if="loading" class="subapp-loading">Loading...</h4>
        <div id="subapp-viewport"> Vue 应用挂载节点 </div>
      </div>
    `,
    el: '#subapp-container',
    data() {
   
   
      return {
   
   
        loading,
      };
    },
  });
}

let app = null;

export default function render({
    
     loading }) {
   
   
  if (!app) {
   
   
    app = vueRender({
   
    loading });
  } else {
   
   
    app.loading = loading;
  }
}

可以看到，导出了一个 render 方法，在 render 方法中创建了一个 Vue 实例，这里有一个 id="subapp-viewport" 的 div 节点，这个就是应用的挂载节点，后面会用到。

如果这个时候我们执行 render 方法的话，页面会是一个 loading 状态，我们可以试试看。

修改一下 examples/main/index.js 文件：

import 'zone.js'; // for angular subapp
import './index.less';
/**
 * 主应用 **可以使用任意技术栈**
 * 以下分别是 React 和 Vue 的示例，可切换尝试
 */
import render from './render/VueRender';
//
/**
 * Step1 初始化应用（可选）
 */
render({
   
   loading: true});
const loader = (load