一、前言
qiankun提供的entry方式有url方式也有对象方式。
- 当entry是url方式时，其会使用import-html-entry库对url进行fetch，然后使用正则获取到html中的script标签和style标签，
- 当entry为对象时，直接传入：scripts数组和styles数组，其不就不调用import-html-entry中的fetch和正则获取对应的js和css了，故此会加快子应用的加载。
需要注意的是，如果自己传入scripts，则不能使用内联script脚本，因为manifest中是获取不到内联的script脚本的，反之，使用html-entry可以获取到。
那么我们自己如何将子应用的style资源和js资源传给qiankun呢？
二、问题解决
1、使用webpack-manifest-plugin插件，在webpack构建过程中，生成对应的manifest数据，并生成entry-manifest.json文件。
代码实现：webpack.config.js
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const publicPath = IS_PROD ? `https://xxx.cdn.com/${projectName}/${new Date().getFullYear()}` : '/'
module.exports = {
plugins: [
new WebpackManifestPlugin({
fileName: 'entry-manifest.json',
generate: (seed, files, entrypoints) => {
const manifestFiles = files.reduce((manifest, file) => {
manifest[file.name] = file.path;
return manifest;
}, seed);
const entrypointFiles = entrypoints.main
.filter(fileName => !fileName.endsWith('.map') && !fileName.endsWith('.hot-update.js')) //修复热更新bug
.map(item => `${publicPath}${item}`);
const scripts = entrypointFiles.filter(item => item.endsWith('.js'));
const styles = entrypointFiles.filter(item => item.endsWith('.css'));
return {
files: manifestFiles,
entrypoints: entrypointFiles,
scripts,
styles,
};
},
}),
]
}
2、基座项目并且请求获取每个子应用的entry-manifest.json文件内容获取对应对js和css数据，传给qiankun。
Promise.allSettled(microAppList.map(item=>fetch(item+'entry-manifets.json'))).then(()=>{
....
})
