mobile+PC白屏问题解决（react15.6）

mobile+PC白屏问题解决（react15.6）

出现白屏的原因：因为后端加了缓存，用户使用的时候会有缓存，当线上更新新的版本以后，当打开页面以后会读取本地缓存，因为之前的js文件已经被替换，所以找不到文件，页面就出现了白屏。给version文件加了时间戳，每次进index.html的时候，会指向下面的script标签里面的代码，因为时间戳不一样，所以每次都会调用一下version。需要每次在发新版本的时候，手动替换一下version里面的js的src路径。就可以解决白屏
1.index.html
在index.html里面加下面代码，单页面应用，刚开始加载index.html的时候对读取下面的js,给version文件加时间戳

2.verson.js
注意：version.js和index.html是同级的文件，在现在这个系统里放在public下面，npm run build以后就会自动把index和version放在同级，应该是webpack的配置问题

(function () {
  function loadScript (scriptSrc, cb) {
    //创建script元素
    var el = document.createElement('script')
    //给script标签价src属性
    el.setAttribute('src', scriptSrc)
    //这里判断el的状态，是在script标签加载完以后，在执行他的回调
    el.onload = el.onreadystatechange = function () {
      if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
        cb && cb()
        this.onload = this.onreadystatechange = null
      }
    }
    //把元素加到body里面，作为body的子元素
    document.body.appendChild(el)
  }
  //调用加载script的函数

注意：因为这个地方，踩过好多坑，刚开始我的写法是先加载mianfest文件，然后把后三个js的src属性放在数组里，因为觉得数组是有序的他会按照顺序加载，但是发到线上以后，还会有白屏的问题，这次白屏的问题是因为页面报错，因为这几个js文件执行是有顺序的，顺序错误会导致后面js要用到的函数或者变量没有获取到而导致页面错误,像这种写法是按顺序加载的，加载完以后才会加载下一个，现在我们这种方法是动态创建script标签，当我们

  const restScripts = ['normalizec08b3a6fd30deb82e30f.js','vendorb9dee843484bb3fa725c.js', 'mainba5fe707d66e9074dcaf.js'] loadScript('manifeste09dd3e40a50f97840a6.js', function () { restScripts.map(v => loadScript(v)) })

这种写法，后面数组里面的js,虽然数组是有序的，但loadScript本身是异步的，不用回调就是谁先准备好谁上，简单说，按顺序发了4个请求，到底哪个请求先返回，我们是不确定的。所以我用了下面这种方式来写。

  loadScript('manifest.feb569.js', function () {
    loadScript('normalize.cd4ee5.js',function(){
      loadScript('vendor.f39f2f.js', function(){
        loadScript('main.81cebb.js')
      })
    })
  })
})()
// <script type="text/javascript" src="manifest.feb569.js"></script>
// <script type="text/javascript" src="normalize.cd4ee5.js"></script>
// <script type="text/javascript" src="vendor.f39f2f.js"></script>
// <script type="text/javascript" src="main.81cebb.js"></script>