开发中遇到一个奇怪的问题，首页echart和mapbox地图会随机性的获取不到DOM节点的宽高，导致无法渲染。
研究了好久，无意间发现了一个现象，在Chrome控制台的网络面板中，css的加载顺序会在js之后。一般来讲，css都应该最先加载，防止用户看到原始的DOM。
调查后发现，build出来的index.html内容如下：
<head>
<script defer="defer" src="/static/js/chunk-vendors.c1b25dfe.js"></script>
<script defer="defer" src="/static/js/app.f3375b5e.js"></script>
<link href="/static/css/app.aa3448ed.css" rel="stylesheet">
</head>上面代码和webpack4 build出来的index.html有很大区别：script加上了defer属性并且放到了head中，而没有放到#app DOM节点后面。
搜索了一番defer的js和css渲染顺序，发现Stack Overflow上已经有人遇到了这个问题，就是defer的js和css渲染顺序并无保证。有可能是先渲染完，在执行js；还有可能是先执行js，后渲染完css。问题链接如下：javascript - CSS and deferred JS execution order - Stack Overflow
所以就导致了上述问题，如果网站打开的首页就需要展示echarts或者mapbox，有可能获取不到DOM的宽高。
查看html-webpack-plugin的最新文档，在webpack5中把scriptLoading属性的值默认设置成了defer。所以build出来的index.html与webpack4 build出来的有了显著不同。
解决方法：手工修改scriptLoading为blocking。
config.plugin('html').tap(args => {
args[0].scriptLoading = 'blocking'
return args
})echarts警告信息：Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.
PS：还有一种临时解决方案，如果不想修改webpack配置，可以在window的onload事件中，手工触发resize事件
const dispatchResizeEvent = () => {
const resizeEvent = new Event("resize");
window.dispatchEvent(resizeEvent);
};
window.addEventListener("load", dispatchResizeEvent);
具体为什么defer的js和css渲染顺序会出现随机性，还没有找到相关解释，有知道的，可回复告知。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
