微前端架构之使用manifest.json优化子应用加载

一、前言

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(()=>{
  ....
})

后期项目代码上传cdn的时候，使用就更绝了。