webpack5 script和css随机加载导致echarts渲染问题

最新推荐文章于 2025-06-20 17:18:19 发布

原创最新推荐文章于 2025-06-20 17:18:19 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #css #前端 #webpack5

Vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

Webpack

11 篇文章

订阅专栏

本文探讨了在项目开发中，由于defer属性的应用，可能导致ECharts和Mapbox地图在页面初始化时无法获取到DOM节点的宽高，进而影响图表渲染。通过分析发现，CSS加载顺序的不确定性是关键因素。解决方法包括修改webpack配置为-blocking scriptLoading，以及提供临时的window.onload解决方案。

开发中遇到一个奇怪的问题，首页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渲染顺序会出现随机性，还没有找到相关解释，有知道的，可回复告知。