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作为转发层