动态创建script标签的坑

因为一些原因，需要手动在入口判断，开发环境就加载开发环境的react.dev.js，react-dom.dev.js，生产环境就加载react.prod.js，react-dom.prod.js

问题：

是动态创建script标签，然后插入到head里，其中react必须比react-dom先加载完，否则会报错白屏，所以按顺序先加载react，后加载react-dom
发现偶尔网络波动，导致react 下载比react-dom慢了几毫秒，导致页面白屏。

希望可以按照顺序来。

解决：

1. 对于两个标签，加了defer不管用，依旧白屏，很迷惑，依旧是没按照顺序执行
2. 封装一个方法，串行加载有顺序的

function loadJS(url, success) {
        var domScript = document.createElement('script');
        domScript.src = url;
        success = success || function(){};
        domScript.onload = domScript.onreadystatechange = function() {
          if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
            success();
            this.onload = this.onreadystatechange = null;
            this.parentNode.removeChild(this);
          }
        }
        document.getElementsByTagName('head')[0].appendChild(domScript);
      }

// 使用
load("aaaaaaa",function(){
    load('bbbb', function(){
       // 通过这种方式保证顺序
    })
})

3. 除了方法2 ，发现了不按照顺序的原因

   
   
   image.png
   
   

   所以创建的时候手动把async置为false即可

ps: 把async设置成false后，依旧有可能会有偶尔能复现的加载顺序的问题导致白屏，原因如下

image.png

这个问题我把async置为false，defer置为true，貌似能解决