背景：
需要?jiǎng)討B(tài)判斷環(huán)境刷袍，引入相應(yīng)版本的（dev, prod的）react房匆，react-dom
之前寫的通過js去創(chuàng)建一個(gè)script標(biāo)簽补憾，再append到head里酌伊，這個(gè)方案偶爾能出現(xiàn)react或者react-dom沒加載到的問題腾窝，明明看network已經(jīng)加載了，但是就是報(bào)ReactDOM is not defined 的bug居砖，又或者是各種依賴ReactDOM的api報(bào)undefined錯(cuò)虹脯，多刷新幾次偶爾能復(fù)現(xiàn)，導(dǎo)致白屏
解決：
發(fā)現(xiàn)如果手動(dòng)寫死script標(biāo)簽在head里奏候，而不是js append進(jìn)去循集，反而沒有bug。但是現(xiàn)在需要判斷環(huán)境蔗草，就不能寫死
用的是webpack編譯咒彤，用了一個(gè)
html-webpack-plugin的插件，這個(gè)插件里面可以配置模板
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
cdn: {
js: process.env.NODE_ENV === 'production' ? [
'cdn1.min.js',
'cdn2.min.js'
// ... 后續(xù)的production的cdn都可以寫上
]: [
'cdn1.dev.js',
'cdn2.dev.js'
// ... 后續(xù)的dev的cdn都可以寫上
]
},
})
]
按照這個(gè)樣子寫了后咒精，需要在index.html上寫模板镶柱，在html的head上加入
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
然后重啟webpack，會發(fā)現(xiàn)編譯的時(shí)候已經(jīng)寫入了模叙，不再是js動(dòng)態(tài)append進(jìn)來的了
參考：https://github.com/jantimon/html-webpack-plugin/issues/1333
手動(dòng)刷新頁面100次歇拆，沒有出現(xiàn)白屏的bug了
原因分析：
動(dòng)態(tài)創(chuàng)建的標(biāo)簽?zāi)J(rèn)帶async，如果關(guān)閉了async，會有執(zhí)行順序的問題
但是如果啟用async查吊，則有多個(gè)腳本相互依賴的加載順序問題
所以需要手動(dòng)關(guān)閉async谐区，手動(dòng)開啟defer
