app中加载h5页面白屏问题

最新推荐文章于 2023-12-04 17:08:43 发布

遗世独立hws

最新推荐文章于 2023-12-04 17:08:43 发布

阅读量1w

点赞数 3

分类专栏：前端学习 h5 app

本文链接：https://blog.csdn.net/huangwensu/article/details/97760266

版权

本文详细探讨了在原生app中，由于网络不佳导致Vue打包后的第三方js包加载失败，从而引发的H5页面白屏问题。提出了解决方案，包括减少第三方依赖、组件化、Webpack实现代码分隔和懒加载、使用Vue骨架屏以及考虑SSR服务端渲染。此外，还提到了白屏可能的其他原因，如ES新语法不支持和图片懒加载问题。

摘要由CSDN通过智能技术生成

一.问题描述：通过原生检查日志在网络不好的情况下，由于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作为转发层