前端白屏出现的原因及一些解决方式

最新推荐文章于 2025-03-12 12:25:44 发布

HuaHua·Li

最新推荐文章于 2025-03-12 12:25:44 发布

阅读量1.2w

点赞数 5

文章标签： javascript vue.js 前端 js

本文链接：https://blog.csdn.net/weixin_53058401/article/details/127968765

版权

本文探讨了前端导致白屏的常见原因，如JS加载延迟、浏览器兼容性、URL错误和缓存问题。为解决这些问题，提出了优化策略，包括减小打包体积、使用CDN、配置externals、开启gzip压缩和利用SSR服务端渲染。同时，推荐使用骨架屏提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端导致白屏的原因：

JS问题
常用框架Vue React Angular都是依靠JS进行驱动，并且单页面的应用html也是依靠JS生成，在渲染页面的时候需要加载很大的JS文件( app.js 和vendor.js )，在JS解析加载完成之前无法展示页面，从而导致了白屏（当网速不佳的时候也会产生一定程度的白屏）。
浏览器兼容问题
vue代码在ie中显示白屏
URL 网址无效或者含有中文字符
缓存导致 参考
vue项目打包后，在非首次线上替换dist文件时，某些手机/浏览器在之后首次打开页面，可能出现白屏情况

原因：在用户端会默认缓存index.html入口文件，而由于vue打包生成的css/js都是哈希值，跟上次的文件名都不同，因此会出现找不到css/js的情况，导致白屏的产生。在服务端更新包之后，由于旧的文件被删除，而index.html所链接的路径依然是旧文件路径，因此会找不到文件，从而白屏。
页面报错

解决办法：

思路：减小打包后的体积（sourceMap关掉，CDN引入，路由懒加载，组件按需加载）

提高渲染速度；

优化用户体验；

CDN资源优化：

将依赖的第三方npm包全部改为通过CDN链接获取，在index.html里插入相应链接

<body>
  <div id="app"></div>
  	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  	<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  	<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
 	<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
 	<script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
</body>

在vue.config.js里配置externals属性

module.exports = {
 ···
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios':'axios',
      'element-ui': 'ElementUI'
    }
 }

卸载相关依赖的npm包

npm uninstall xxx

使用gzip压缩

前端处理：

// npm i compression-webpack-plugin -S
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
	productionSourceMap: false,
	configureWebpack: config => {
		if (process.env.NODE_ENV === 'production') {
			return {
				plugins: [
					new CompressionPlugin({
						// 匹配规格
						test: /\.js$|\.html$|\.css$|\.png$/,
						// 文件超过多大进行压缩 单位Byte
						threshold: 10240,
						// 是否删除源文件（建议不删除）
						deleteOriginalAssets: false
					})
				],
			}
		}
	},
}

还需要在 nginx开启gzip压缩, eg:

 gzip on;
 gzip_static on; //当存在.gzip格式的js文件时，优先使用静态文件
 gzip_min_length  10k; //开启gzip压缩的最小大小
 gzip_buffers     4 16k;
 gzip_http_version 1.1;
 gzip_comp_level 6;
 gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
 gzip_vary on;
 gzip_proxied   expired no-cache no-store private auth;
 gzip_disable   "MSIE [1-6]\.";