关于react+umi+dva+antd mobile打包上线后加载DOM太慢，出现一段时间的空白的解决方法1

此项目是个需要嵌套到甲方的APP中H5项目，用的 react+umi+dva+antd mobile编写，写完上线后发现在加载之初会有一段很长时间的空白

如上图所示，umi加载顺序为先加载umi文件再加载vendors文件然后是layout.js 最后才是对应的页面的文件。
解决后效果如下：

方法如下：
1.修改webpack打包配置，
在.umirc.js文件中添加打包配置

chainWebpack(config){
    config.merge({
      optimization: {
        minimize: true,
        splitChunks: {
          chunks: 'async',
          minSize: 30000,
          minChunks: 2,
          automaticNameDelimiter: '.',
          cacheGroups: {
            vendor: {
              name: 'vendors',
              test: /^.*node_modules[\\/](?!ag-grid-|lodash|rc-select|rc-time-picker|antd-mobile).*$/,
              chunks: "all",
              priority: -10,
            },
            default: {
              minChunks: 1,
              priority: -20,
              reuseExistingChunk: true
            }
          }
        }
      }
    });
    //过滤掉momnet的那些不使用的国际化文件
    config.plugin("replace").use(require("webpack").ContextReplacementPlugin).tap(() => {
      return [/moment[/\\]locale$/, /zh-cn/];
    });
  },

此配置将所有的页面都打包到vendor.js中，最后打包的结果只有html、umi.css、umi.js、vendors.async.js、vendors.chunk.css四个主要文件

2.添加loading效果（使用antd mobile自带的loading组件html及样式）
在document.ejs中添加loading代码如下：

<div class="loadingContainer" id="loadingContainer" style="display: block">
  <div class="am-flexbox am-flexbox-dir-row am-flexbox-justify-center am-flexbox-align-center" style="width: 100%; height: 100%;">
    <div class="am-activity-indicator am-activity-indicator-lg">
      <span class="am-activity-indicator-spinner am-activity-indicator-spinner-lg" aria-label="loading"></span>
    </div>
  </div>
</div>

在global.less中添加样式

.loadingContainer{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1005;
  .am-flexbox.am-flexbox-align-center {
    -webkit-align-items: center;
    align-items: center;
  }
  .am-flexbox.am-flexbox-justify-center {
    -webkit-justify-content: center;
    justify-content: center;
  }
  .am-flexbox.am-flexbox-dir-row {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  .am-flexbox {
    text-align: left;
    overflow: hidden;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
  }
  .loader__loadContainer___2afjb .am-activity-indicator {
    z-index: 1006;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .am-activity-indicator {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    z-index: 99;
  }
  .am-activity-indicator-spinner-lg {
    width: 32px;
    height: 32px;
  }
  .am-activity-indicator-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-2.125%20-1.875%2064%2064%22%3E%3Cpath%20fill%3D%22%23CCC%22%20d%3D%22M29.875-1.875c-17.673%200-32%2014.327-32%2032s14.327%2032%2032%2032%2032-14.327%2032-32-14.327-32-32-32zm0%2060.7c-15.85%200-28.7-12.85-28.7-28.7s12.85-28.7%2028.7-28.7%2028.7%2012.85%2028.7%2028.7-12.85%2028.7-28.7%2028.7z%22%2F%3E%3Cpath%20fill%3D%22%23C70019%22%20d%3D%22M61.858%2030.34c.003-.102.008-.203.008-.305%200-11.43-5.996-21.452-15.01-27.113l-.013.026c-.24-.137-.515-.22-.81-.22-.912%200-1.65.738-1.65%201.65%200%20.654.384%201.215.937%201.482%207.963%205.1%2013.247%2014.017%2013.247%2024.176%200%20.147-.01.293-.01.44h.022c0%20.01-.004.02-.004.03%200%20.91.74%201.65%201.65%201.65s1.65-.74%201.65-1.65c0-.06-.012-.112-.018-.167z%22%2F%3E%3C%2Fsvg%3E");
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
    -webkit-animation: spinner-anime 1s linear infinite;
    animation: spinner-anime 1s linear infinite;
  }
  @-webkit-keyframes spinner-anime{
    0%{
      background: lightgreen;
    }
    100%{
      background: lightblue;
    }
  }
  @-webkit-keyframes spinner-anime{
    0%{
      -webkit-transform: rotate(0deg);
      border-color: lightgreen;
    }
    100%{
      -webkit-transform: rotate(360deg);
      border-color: lightblue;
    }
  }
}

然后在layouts下的index.js文件中添加如下代码：

componentDidMount(){
      let loadingElement=document.getElementById('loadingContainer')
      if(loadingElement.style.display=='block'&&!this.props.global.loading){
        document.getElementById('loadingContainer').style.display='none'
      }
    }

用来判断什么时候显示loading效果。
此种方法虽然可以解决这个空白的问题但是还是有着许多缺点的，如果有更好的解决方案，请指教