动态引入script标签的改进方案

背景：

1. 需要动态判断环境，引入相应版本的（dev, prod的）react，react-dom

2. 之前写的通过js去创建一个script标签，再append到head里，这个方案偶尔能出现react或者react-dom没加载到的问题，明明看network已经加载了，但是就是报ReactDOM is not defined 的bug，又或者是各种依赖ReactDOM的api报undefined错，多刷新几次偶尔能复现，导致白屏

解决：

1. 发现如果手动写死script标签在head里，而不是js append进去，反而没有bug。但是现在需要判断环境，就不能写死

2. 用的是webpack编译，用了一个html-webpack-plugin的插件，这个插件里面可以配置模板

   plugins: [
    new HtmlWebpackPlugin({
        
      template: './index.html',
      cdn: {
        
        js: process.env.NODE_ENV === 'production' ? [
          'cdn1.min.js',
          'cdn2.min.js'
          // ... 后续的production的cdn都可以写上
        ]: [
          'cdn1.dev.js',
          'cdn2.dev.js'
          // ... 后续的dev的cdn都可以写上
        ]
      },
    })
   ]
   

按照这个样子写了后，需要在index.html上写模板，在html的head上加入

<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) {
    %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>

然后重启webpack，会发现编译的时候已经写入了，不再是js动态append进来的了

手动刷新页面100次，没有出现白屏的bug了

原因分析：
动态创建的标签默认带async，如果关闭了async，会有执行顺序的问题

但是如果启用async，则有多个脚本相互依赖的加载顺序问题
所以需要手动关闭async，手动开启defer