背景：
需要动态判断环境，引入相应版本的（dev, prod的）react，react-dom
之前写的通过js去创建一个script标签，再append到head里，这个方案偶尔能出现react或者react-dom没加载到的问题，明明看network已经加载了，但是就是报ReactDOM is not defined 的bug，又或者是各种依赖ReactDOM的api报undefined错，多刷新几次偶尔能复现，导致白屏
解决：
发现如果手动写死script标签在head里，而不是js append进去，反而没有bug。但是现在需要判断环境，就不能写死
用的是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进来的了
参考：https://github.com/jantimon/html-webpack-plugin/issues/1333
手动刷新页面100次，没有出现白屏的bug了
原因分析：
动态创建的标签默认带async，如果关闭了async，会有执行顺序的问题
image.png
但是如果启用async，则有多个脚本相互依赖的加载顺序问题
所以需要手动关闭async，手动开启defer
