前端发版上线出现白屏问题

2024-03-27 15:20

本文主要是介绍前端发版上线出现白屏问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

    • 路由配置问题
    • 资源缓存问题
    • 首屏加载过慢

:喂,你的页面白啦!

出现上线白屏的问题有很多,如:配置错误、缓存问题、浏览器兼容问题,根据不同情况去解决。

路由配置问题

问题描述: 在vue开发的前端网页上线后,出现白屏,刷新页面报404错误。

问题分析: 项目上线之后出现白屏,且刷新之后也找不到资源,服务器静态资源文件加载失败,出现这种情况,通常是路由配置的问题。

解决方案:

配置路由:在vue-router的配置中设置mode为history模式(history模式:当用户在地址栏中输入或刷新页面时,浏览器会向服务器发送关于路径的请求),在服务器端配置URL重写规则,即:在Nginx中使用try_files指令,将所有路径都重定向到入口文件(比如index.html),这样即使用户在地址栏中输入或刷新页面,服务器也会正确返回入口文件,而不会出现404错误。

// vue-router配置
const router = new VueRouter({mode: 'history',routes: [...]
});
// nginx配置
location / {root ...index ...try_files $uri $uri/ /index.html;
}
location @router {rewrite ^.*$ /index.html last;
}

资源缓存问题

问题描述: web页面白屏,需要清除缓存数据重新加载才能正常访问。单页面的项目,客户不想每次发版都刷新,也不希望每次都重新加载资源文件(即使是缓存也需要刷新和加载)。

问题分析:

在首次上线项目的时候,build生成的资源文件直接放到服务端上线即可。但之后上线,在客户端会默认缓存index.html入口文件,但vue打包生成的css/js都是hash值,跟上次的文件名都不一样,因此会出现找不到css/js的情况,导致出现白屏的问题。

解决问题: 发版后前端页面白屏,通过刷新才能访问前端页面。我个人觉得这个问题无法解决,因为不管怎么做,服务器资源发生变化了,在web页面更新资源的时候都需要一定的缓冲时间。

优化方案:

1、配置资源缓存

确保index.html不被缓存,这样每次用户访问时都会从服务器获取最新版本。在index.html文件的meta标签中添加缓存控制信息,在服务端的响应头中设置合适的缓存过期时间。对index.html入口文件不缓存,css/js资源设置缓存过期时间。

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache" content="no-cache">
// nginx配置
#为了解决线上发布新版本后访问前端页面出现短暂性白屏问题,就是把缓存给禁用掉
location = /index.html {add_header Cache-Control "no-store, no-cache, no-transform, must-revalidate, max-age=0";add_header Pragma "no-cache";  add_header Expires "0";
}location / {#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404try_files $uri $uri/ @router;index  index.html index.htm;
}
#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
#因此需要rewrite到index.html中,然后交给路由在处理请求资源
location @router {rewrite ^.*$ /index.html last;
}

2、增加版本号或时间戳到资源文件名

通过在构建过程中将版本号或时间戳添加到资源文件名中,可以避免浏览器加载旧的缓存资源。

// vue.config.js
module.exports = {  outputDir: 'dist',  filenameHashing: true, // 确保文件名包含hash  chainWebpack: config => {  config.output  .filename(`js/[name].[contenthash].js`)  .chunkFilename(`js/[name].[contenthash].chunk.js`);  }  
}

首屏加载过慢

问题描述: 用户打开页面,出现长时间的白屏,特别是对于单页面应用来说。

问题分析:

出现首页长时间白屏的原因有很多:

1、首页需要加载大量的资源或依赖
2、服务器请求速度太慢
3、首页的样式太复杂,需要渲染很长时间
4、浏览器兼容问题

优化方案:

1、代码拆分+按需(懒)加载:将页面依赖的资源进行代码拆分,通过按需加载或懒加载的方式,延迟加载非必要的资源,只有当用户需要访问到某个模块的时候再去加载对应的资源。

2、预加载资源:通过标签来预加载关键资源,提前加载必要资源。

3、CSS优化:可以通过css预编译器来提高css代码的复用性,避免使用过多的CSS样式和复杂的选择器,尽量减少页面重绘和重排的次数,优化CSS文件加载和解析速度。

4、异步加载脚本:将JavaScript脚本放在页面底部或使用defer、async属性进行异步加载,避免脚本阻塞页面渲染。

5、服务器性能优化: 对服务器进行性能优化,如:CDN加速、启用Gzip压缩、配置合适的缓存策略等,提高资源加载速度。

6、服务端渲染:对于单页面应用,考虑使用服务端渲染(SSR)技术,在服务器端生成页面的HTML内容,减少客户端渲染时间,加快首屏加载速度。

7、缓存优化:利用浏览器缓存机制和服务端缓存技术,减少重复请求,加快页面加载速度。

在这里插入图片描述

参考文章:

彻底解决前端发版白屏问题和解决方案

【优化】vue项目缓存引发的白屏

灰度发布、蓝绿部署、金丝雀都是啥?

Vue 项目中首页长时间白屏的原因及解决方法

这篇关于前端发版上线出现白屏问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/852563

相关文章

SpringBoot启动报错的11个高频问题排查与解决终极指南

《SpringBoot启动报错的11个高频问题排查与解决终极指南》这篇文章主要为大家详细介绍了SpringBoot启动报错的11个高频问题的排查与解决,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一... 目录1. 依赖冲突:NoSuchMethodError 的终极解法2. Bean注入失败:No qu

MySQL新增字段后Java实体未更新的潜在问题与解决方案

《MySQL新增字段后Java实体未更新的潜在问题与解决方案》在Java+MySQL的开发中,我们通常使用ORM框架来映射数据库表与Java对象,但有时候,数据库表结构变更(如新增字段)后,开发人员可... 目录引言1. 问题背景:数据库与 Java 实体不同步1.1 常见场景1.2 示例代码2. 不同操作

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

如何解决mysql出现Incorrect string value for column ‘表项‘ at row 1错误问题

《如何解决mysql出现Incorrectstringvalueforcolumn‘表项‘atrow1错误问题》:本文主要介绍如何解决mysql出现Incorrectstringv... 目录mysql出现Incorrect string value for column ‘表项‘ at row 1错误报错

如何解决Spring MVC中响应乱码问题

《如何解决SpringMVC中响应乱码问题》:本文主要介绍如何解决SpringMVC中响应乱码问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring MVC最新响应中乱码解决方式以前的解决办法这是比较通用的一种方法总结Spring MVC最新响应中乱码解

pip无法安装osgeo失败的问题解决

《pip无法安装osgeo失败的问题解决》本文主要介绍了pip无法安装osgeo失败的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 进入官方提供的扩展包下载网站寻找版本适配的whl文件注意:要选择cp(python版本)和你py

解决Java中基于GeoTools的Shapefile读取乱码的问题

《解决Java中基于GeoTools的Shapefile读取乱码的问题》本文主要讨论了在使用Java编程语言进行地理信息数据解析时遇到的Shapefile属性信息乱码问题,以及根据不同的编码设置进行属... 目录前言1、Shapefile属性字段编码的情况:一、Shp文件常见的字符集编码1、System编码

Spring MVC使用视图解析的问题解读

《SpringMVC使用视图解析的问题解读》:本文主要介绍SpringMVC使用视图解析的问题解读,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring MVC使用视图解析1. 会使用视图解析的情况2. 不会使用视图解析的情况总结Spring MVC使用视图

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处