react umi 通过headScripts解决首次加载白屏问题

react18 | umi4 实现首屏加载问题

config.ts

headScripts: [
    { src: '/static/origin.js', async: true },
  ],

根目录下static/origin.js

 (function () {
  const app = document.querySelector('#app');
  console.log('app=>>>', app)
  if (app && app.innerHTML === '') {
    _root.innerHTML = `...加载中`;
  }
})();

    

本地可以正常使用，但是构建之后 测试环境和线上会出现白屏情况，直到主包加载完成才能正常渲染页面，于是打印了一下app,发现场景复现时app元素为null，定位到原因是**： 因为上面origin.js是异步加载，umi框架的index.html是webpack动态构建的，所以就出现了执行origin.js时 app元素还未创建完成 loading代码就没办法正常注入到app内部**

解决思路

1、在app元素加载完再注入， 尝试了递归获取｜settimeout| 监听window.onload | addEventlistner('')都不好用

2、查询到可以通过umi的自定义插件实现改思路

了解插件的使用

• 根目录创建plugin文件夹，创建plugin_loading.ts

import { IApi } from '@umijs/max'
export default (api: IApi) => {
  api.modifyHTML(($) => {
    $('#app').after([
      `<script async src='...origin.js'></script>`,
    ])
    return $
  })
}

config.ts

plugins: [
    './plugin/plugin_loading', // 确保路径正确指向插件文件
  ],

我选择src用的是网络资源，本地执行时一直报错

如果遇到这个报错不要考虑别的问题 就是资源路径问题 - 改成网络资源就好了（也可以研究一下路径应该怎么引）

就解决了上面遇到的问题，每次都是在app元素加载完成之后才执行origin.js的方法