移动端页面偶发白屏问题，cdn强刷就好了

Question

问题描述

我司移动端项目有基于vue-cli的 有react的，但感觉此问题和框架没关系，因为共同点是都用webpack构建出 vendor.js app.js 以及其他异步chunk.js 上线的时候引用的是cdn的地址，cdn会回源到我们服务器，在每次上线后，也就是 vendor或app.js有变动的时候，都会迎来一波客户反馈白屏，但很难复现，我们会强刷cdn的vendor的资源便可解决，但是问题原因还没有排查出来，不知大家有没有遇到过类似问题以及尝试过一些解决方案呢

问题出现的环境背景及自己尝试过哪些方法

尝试过的方案：
1.强刷cdn的vendor 相当于强制更新缓存
2.构建时不再抽取vendor包，app包将会变大，不是好办法也无法解决根本问题

Answer 1

这两天遇到类似的问题，感觉与你类似。

场景是我们的项目的vendor包使用webpack的dllPlugin生成的，然后把react、react-dom等等包打包到了vendor里面，然后package.json里面对这些包的版本描述都是使用^表示，所以每次yarn安装的时候，如果本地满足满足package.json里版本描述条件的包，yarn就不会继续重新拉取这个包，如果不满足，则会重新安装，然后导致A同事本地安装的react-dom版本是16.6.0，B同事本地安装的react-dom版本是16.4.2，以此类推，可能其他的包很多版本也不一致。

然后在发布的过程中，A同事和B同事都同时编译了vendor包，也正好生产环境中的vendor包是不带hash的，其他业务代码带了hash，A发了之后过不久，B又发布，导致部分用户的浏览器缓存了A发布的vendor包，而B发布之后，缓存了A的vendor包的用户使用的是B的业务代码，导致代码不兼容，页面出现白屏。

然后想了三个解决办法：

1. package.json里面的要打到vendor的包的版本描述指定具体版本，不要使用^或者~来描述。
2. 所有打到vendor里面的所有包单独预先编译好，然后开发环境和生产环境都用这个预先编译好的包，每次发布都不要发这个vendor包。
3. 生产环境中的vendor包带上hash，每次发布之后强刷hash。

Answer 2

你们静态资源有hash么？

Answer 3

听上去像是缓存的设置有点问题，可能每次输出的文件都不太一样，但CDN里没做预热所以还按原文件来，但是原文件已经不在了所以白屏（404）。