app中加载h5页面白屏问题

一.问题描述：通过原生检查日志在网络不好的情况下，由于vue打包后的第三方js包加载失败导致h5页面白屏。

二.解决方案：

1.减少第三方依赖：在package.json中把不需要的包删除。

2.组件化：项目中将能复用的部分组件化。

3.webpack实现vue代码分隔和懒加载：路由懒加载和组件按需加载。

(1).路由懒加载
// r就是resolve
const list = r => require.ensure([], () => r(require('../components/list/list')), 'list');
// 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载
const router = new Router({routes: [{path: '/list/blog',component: list,name: 'blog'}]
})(2).组件按需加载将import page1 from '@/page/page1' 改为 const page1 = () => import('@/page/page1')

4.使用vue骨架屏：在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉，即在index.html中的div#app内直接插入骨架屏相关内容即可。

5.ssr服务端渲染和nsr原生渲染。

ssr渲染：（1）使用node.js作为转发层

（2）node服务从java获取数据，这一阶段的耗时主要取决于node服务与java服务的通信时间。

（3）node服务将ajax返回的数据，和初始化完css数据、meta、title等信息的html基础结构，以及html字符串中标签上的方法绑定和外链js代码执行等拼装好返回给客户端进行解析。

三、其他可能导致白屏的原因

1、不支持ES6、ES7等新语法

（1）入口引入babel-polyfill（第一行）

（2）第三方的，要先进行转换

2、图片懒加载，大图片上上传CDN

app中加载h5页面白屏问题相关推荐

Android加载H5页面手机的返回操作
最近接了一个新项目,项目说是混合开发,其实就是原生给个壳,实现全是前端的同学做的,接到项目后,领导说了很多bug,其中这个比较有趣,所以在这个记录一下,还原一下: 当我们登录成功后进入首页,然后再首页 ...
鸿蒙系统中的 WebView 加载H5页面出现net::ERR_CLEARTEXT_NOT_PERMITTED的解决方法
目前在学习鸿蒙系统开发相关的应用,在加载H5页面的时候,在页面上显示出现这也错误提示 net::ERR_CLEARTEXT_NOT_PERMITTED,百度了一番,显示的结果都是在安卓系统上的解决办法 ...
9.0 apk加载H5页面时报错WebView is not allowed in privileged processes, apk加载H5 webview加载不出来的问题
apk加载H5页面时报错WebView is not allowed in privileged processes是需要hook下 fun hookWebView() {val sdkInt = B ...
android加载h5页面加进度条,使用Android仿微信加载H5页面的进度条
这篇文章主要为大家详细介绍了Android仿微信加载H5页面进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下前言 Android中WebView打卡前端页面时受到网路环境,页面内容大小的影响 ...
QWidget中加载QML页面并设置透明背景
要在QWidget中加载QML页面首先要用到一个很重要的类QQuickWidget 示例: m_pQuickWidget = new QQuickWidget(this);m_pQuickWidget ...
flutter 中使用 WebView加载H5页面异常net:ERR_CLEARTEXT_NOT_PERMITTED
最近有个flutter项目中根据搜索结果跳转到相应的H5页面发现老是报错,曾现在闲暇拉出来解决哈先来看一个搜索功能的测试已进入详情页面就提示错误,尴尬了. 只有去检测代码了撒 Search.dar ...
webview加载网页出现白屏
webView.setWebViewClient(new WebViewClient() { @Overridepublic boolean shouldOverrideUrlLoading(WebV ...
webView加载H5页面出现空白页的解决办法
最近在做一个理财的项目,其中用到的H5页面比较多,在项目后期出现了很多bug,今天介绍下webView加载H5出现空白的解决办法首先介绍下出现问题的场景,我们在一个Activity中镶嵌了一个H5的 ...
opengl es java_java – 在Android OpenGL ES App中加载纹理
1)您应该根据需要分配尽可能多的纹理名称.一个用于您正在使用的每个纹理. 加载纹理是一项非常繁重的操作,会使渲染管道停顿.所以,你永远不应该在游戏循环中加载纹理.您应该在呈现纹理的应用程序状态之前具有 ...

app中加载h5页面白屏问题

app中加载h5页面白屏问题相关推荐

最新文章

热门文章