目录
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"
},
