为什么我的手机白屏了？是不是你们APP有问题？？？-某位不愿意透露姓名的用户反馈
目前，我们团队的h5移动端项目皆采用vue2.0框架进行开发,由于SPA的特性，导致首页加载的时候会比平常页面加载的速度稍微慢点，在网络不好的极端情况下可能会导致类似
网页白屏的情况，就会影响用户的体验，我们团队采用了多种办法，绞尽脑汁，头发掉光，终于能够控制在正常wifi情况下，首页加载速度<1s，下面拿我负责的项目进行一下
项目的优化说明：
1.vue路由懒加载
这个官网上面有说明，直接照着做就行(https://router.vuejs.org/zh/guide/advanced/lazy-loading.html)
2.首页加载资源控制
这个就是说首页必须控制加载的资源，实现按需加载，这个首页包括你路由的首页及index.html文件。路由的页面尽量简洁，所有用到的icon建议都使用一下
(https://tinypng.com/)压缩一下，如果首页用到了组件，使用组件异步加载。index.html文件里面不需要的资源全部清理掉,我们项目在index.html中做了
全移动平台的兼容逻辑，这里会用到资源动态加载，本文最后会提供一个简单的动态加载的方法：
3.页面用到的组件动态加载
import orderRuleText from "@/components/orderRule.vue"
export default {
name:"orderCreat",
components:{
orderRuleText:orderRuleText
}
}
4.开启Gzip压缩
具体方法请百度，注意开启压缩项目需安装compression-webpack-plugin插件才能正常运行
5.首页GIF图过渡或者首页预渲染
这2种方法都是能够提示用户体验的方法，使用的原理都相同,vue项目启动会在index.html中找到id=app的div并将内容挂载进去，那么项目未启动前index.html中div.#app这个元素
中的内容将会显示给用户查看，那么我们可以将一个比较小的GIF图或者一段内容放在此处，项目启动后将会自动清理完毕。其实我们团队有好几个项目都采用了首页预渲染的方式，但是我
个人感觉现在的方式有个巨大缺陷且收益微小，所以我负责的项目暂时未采用首页预加载，我个人推荐使用GIF图进行过渡
6.服务器渲染(SSR)
解决问题的终极解决方案，但是不适合我们项目，所以未启用
//动态加载的方法如下所示
//动态加载完毕js文件可执行回调函数，动态加载css文件执行回调由于浏览器之间判断加载完毕的逻辑差异巨大且逻辑复杂，暂不处理
//type=1为css，type=2为js,source为加载的url资源，callback为回调函数
function dynamicLoadResources(type,source,callback){
if(!source || source.length ===0){
throw new Error('dynamic load resources need resources');
}
var head = document.getElementsByTagName('head')[0]
if(type == 1){
var link = document.createElement('link')
link.href = source
link.rel = 'stylesheet'
link.type = 'text/css'
head.appendChild(link)
}else if(type == 2){
var script = document.createElement('script')
script.src = source
script.type = 'text/javascript'
head.appendChild(script)
script.onload = callback
}
}