线上环境有时出现打包后el-table渲染不出来是怎么回事?

586 阅读3分钟

偶现:(频率不固定,有时候可能一个月了才会出现这种清理,有时候一旦出现就是好多次)

  1. 同一个平台同一个包,两个环境(配置一样)打包效果不一样,有一个环境没打包成功
  2. 同一个平台同一个包,同一个环境不同次打包效果不一样,某次没打包成功 分析渲染结果:

image.png

控制台Console没报错,数据是有的,控制台Element查看表格标签有渲染出来,就是没有渲染出表头数据

尝试了如下方法:

  • 固定package.json 版本
  • 上传package-lock.json文件
  • vue.config.js配置去掉缓存构建,改为dll取出所有依赖单独打包进行构建
  • 试了网上的方法:
  1. 莫名其妙el-table不显示问题
  2. webpack打包vue项目,打包成功,el-table没有渲染出来bug

以上方法都不奏效

奇怪的是本地打包从来没有出现过问题,只能找到打包后的文件进行分析文件比对差异

  1. 新建了一个测试页面,用来渲染各种表格,有自己基于el-table封装的表格,原始el-table表格,原生table表格
  2. 代码上传到git后在线上构建部署
  3. 将打包后表格渲染失败和成功的静态文件下载下来进行对比
  4. 比较测试页面的文件差异,只需比对app.js和vendors~app.js和当前测试页面生成的chunk-xx.js文件

比对结果: 两次最后定位的问题就是打包后app.js和vendorsapp.js文件有差异,有问题打包的vendorsapp.js文件比正常的多了很多代码,导致el-table渲染render表头后,columns变化了没更新render。

问题定位到了,但为啥打包会有差异,代码一样,打包构建出来的文件不一样,而且不是必现,可能这一次没问题,下一次就有问题了。怎么解决呢???

追踪columns变化了render却不更新,发现已经不是同一个实例了,就全局搜索了element-ui的版本,结果在vendors~app.js搜索到了,这个依赖不应该出现在这个文件里面,因为我已经通过dll单独将element-ui打包在vendor.dll.js文件中了,问题应该就出现在这里,有两个element-ui,导致内部错乱了吧。都定位到这里,我还是不知道怎么解决,只能请教技术专家了。

专家让我先固定版本,然后问我本地node版本和线上node版本,我看了下本地是14.15.0,线上是8.12.0,差异就出来了,他让我升级线上的node版本再打包测试一下,果然测试了很多次没出现问题了。

真是坑死啊,排查了几个月,最后竟然发现是node版本不一致,线上node版本太低,但是这个也太随机了,下次一定要提前排查版本差异,版本不一样可能问题和我也比较诧异。。。