0


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

前端导致白屏的原因:

  1. JS问题 常用框架Vue React Angular都是依靠JS进行驱动, 并且单页面的应用html也是依靠JS生成,在渲染页面的时候需要加载很大的JS文件( app.js 和vendor.js ),在JS解析加载完成之前无法展示页面,从而导致了白屏(当网速不佳的时候也会产生一定程度的白屏)。
  2. 浏览器兼容问题 vue代码在ie中显示白屏
  3. URL 网址无效或者含有中文字符
  4. 缓存导致 参考 vue项目打包后,在非首次线上替换dist文件时,某些手机/浏览器在之后首次打开页面,可能出现白屏情况原因:在用户端会默认缓存index.html入口文件,而由于vue打包生成的css/js都是哈希值,跟上次的文件名都不同,因此会出现找不到css/js的情况,导致白屏的产生。在服务端更新包之后,由于旧的文件被删除,而index.html所链接的路径依然是旧文件路径,因此会找不到文件,从而白屏。
  5. 页面报错

解决办法:

思路:减小打包后的体积(sourceMap关掉,CDN引入, 路由懒加载,组件按需加载)

​ 提高渲染速度;

​ 优化用户体验;

CDN资源优化:

  1. 将依赖的第三方npm包全部改为通过CDN链接获取,在index.html里插入相应链接
<body><divid="app"></div><scriptsrc="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script><scriptsrc="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script><scriptsrc="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script><scriptsrc="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script><scriptsrc="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script></body>
  1. 在vue.config.js里配置externals属性
module.exports ={
 ···
    externals:{'vue':'Vue','vuex':'Vuex','vue-router':'VueRouter','axios':'axios','element-ui':'ElementUI'}}
  1. 卸载相关依赖的npm包
npm uninstall xxx

使用gzip压缩

前端处理:

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

module.exports ={productionSourceMap:false,configureWebpack:config=>{if(process.env.NODE_ENV==='production'){return{plugins:[newCompressionPlugin({// 匹配规格test:/\.js$|\.html$|\.css$|\.png$/,// 文件超过多大进行压缩 单位Bytethreshold: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]\.";

注意:当nginx开启gzip压缩的时候,无论前端打包出来的文件是否压缩,网站加载到的js文件都是经过nginx实时压缩过的 。

当gzip_static off的时候,前端上传的js压缩文件(gzip格式那些)并没有什么卵用。
当gzip_static on时,优先加载前端打包的gzip压缩文件,如果没有找到该文件,那么nginx将实时压缩之后传给浏览器。

SSR****服务端渲染

首页加loading或骨架屏(仅仅是在体验上优化)

elementU有骨架屏组件(Skeleton)

所谓的骨架屏,就是在页面内容未加载完成的时候,先使用一些图形进行占位,待内容加载完成之后再把它替换掉。在这个过程中用户会感知到内容正在逐渐加载并即将呈现,降低了“白屏”的不良体验。


本文转载自: https://blog.csdn.net/weixin_53058401/article/details/127968765
版权归原作者 HuaHua·Li 所有, 如有侵权,请联系我们删除。

“前端白屏出现的原因及一些解决方式”的评论:

还没有评论