qinakun实现公共依赖的加载

qinakun实现公共依赖的加载

若是主应用和子应用都使用了相同的库或者包(antd，aixos)，就可以用externals的方式引入，减少加载重复包导致的资源浪费。

方式：
1：主应用：将所有公共依赖配置webpack的externals的方式，并且在index.html使用外链引入这些公共依赖
2；子应用：和主应用一样配置webpack的externals。并且在index.html使用外链引入这些公共依赖。
注意点：还需要给子应用的公共依赖加上 ignore 属性(这是自定义的属性，非标准属性)，qiankun在解析时发现ignore属性会自动直接忽略

子应用之中使用axios

• axios的安装： cnpm i axios

umi子应用 加载外部js链接 .umirc.ts

import { defineConfig } from 'umi';

export default defineConfig({
  base: '/sub-umi',
  npmClient: 'npm',
  plugins: ['@umijs/plugins/dist/qiankun'],
  qiankun: {
    slave: {},
  },
  // 子应用 headScripts作用：配置在HTML文档的head标签中引入的外部脚本文件
  headScripts: [
    { src: 'https://unpkg.com/axios@1.1.2/dist/axios.min.js', ignore: true },
  ],
  routes: [
    { path: '/', component: '@/pages/index' },
    { path: '/detail', component: '@/pages/detail' },
  ],
});

使用axios

import axios from 'axios';
import { useEffect } from 'react'

export default function List() {
  useEffect(() => {
    axios.get('/list').then(res => {
      console.log(res);
    })
  }, [])
  return (
    <div>
      列表页内容
    </div>
  );
}

基座的配置

• 安装依赖：cnpm i react-app-rewired customize-cra

config-overrides.js (src同级)

• 通过 externals的方式引入子应用的axios

// 修改config-overrides.js
const { override, addWebpackExternals } = require('customize-cra')

module.exports = override(
  addWebpackExternals ({
    axios: "axios",
  }),
)

基座 public / index.html之中配置与子应用加载axios同一个版本的js链接

<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>

基座 package.json 修改运行脚本

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },