携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情
前言
最近在测试反馈偶尔会遇到白屏的情况
就是点击其他菜单，右边的内容一直显示的骨架屏
产生问题的原因
经过排查，最终确认了是因为部署了新的镜像，覆盖了旧的镜像，导致旧的资源请求不到导致的
因为每次编译产生的hashcode是有可能不一样，所以请求的文件路径也是不一样的
详细解释如下
在2022/08/08 10:00编译部署了一版代码，代码结构如下
用户进入到 http://xxx/xxx/user, 这个路由返回的是index.html
我们看nginx的配置，try_files $uri /index.html 找不到文件会返回index.html
location / {
if ($request_filename ~* .*\.(?:htm|html)$) ## 配置页面不缓存html和htm结尾的文件
{
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}
root html;
index index.html index.htm;
try_files $uri /index.html;
}
我们项目用的是异步加载，所以不会一下加载所有的路由，切换不同的路由请求对应每个模块的资源，当我们的目录切换到user的时候，页面会请求对应的js,css
我们在11:00重新编译部署了新的代码，生成了新的文件
这个时候我们并没有刷新页面，用户点击voucher这个菜单，代码还是旧的，会请求旧的资源,但是这个资源已经被新的资源覆盖了，已经不存在了，原先以为资源不存在会返回404状态码，但是其实不存在的资源也会返回index.html,这是上面说到的nginx配置，然后路由被识别为不存在，页面会显示404
资源存在的情况，nginx会返回对应的资源
我们把文件的hashcode改掉，会返回index.html,p__work_bench__resource__packages__index.93b0f1f.async.js会被当做路由处理
由于返回的文件类型和内容不对，页面会一直显示骨架屏的内容，浏览器也不会报错404状态码之类的
总结
今天分析了白屏产生的原因，下篇文章讲对应的解决方案
