背景:
需要动态判断环境,引入相应版本的(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,会有执行顺序的问题
但是如果启用async,则有多个脚本相互依赖的加载顺序问题
所以需要手动关闭async,手动开启defer