移动端h5首屏加速

为什么我的手机白屏了？是不是你们APP有问题？？？-某位不愿意透露姓名的用户反馈

目前，我们团队的h5移动端项目皆采用vue2.0框架进行开发,由于SPA的特性，导致首页加载的时候会比平常页面加载的速度稍微慢点，在网络不好的极端情况下可能会导致类似网页白屏的情况，就会影响用户的体验，我们团队采用了多种办法，绞尽脑汁，头发掉光，终于能够控制在正常wifi情况下，首页加载速度<1s，下面拿我负责的项目进行一下
项目的优化说明：

1.vue路由懒加载
这个官网上面有说明，直接照着做就行
官网例子

2.首页加载资源控制
这个就是说首页必须控制加载的资源，实现按需加载，这个首页包括你路由的首页及index.html文件。路由的页面尽量简洁，所有用到的icon建议都使用一下tingpng压缩一下，如果首页用到了组件，使用组件异步加载。index.html文件里面不需要的资源全部清理掉,我们项目在index.html中做了全移动平台的兼容逻辑，这里会用到资源动态加载，本文最后会提供一个简单的动态加载的方法

3.开启Gzip压缩
具体方法请百度，注意开启压缩项目需安装compression-webpack-plugin插件才能正常运行

4.首页GIF图过渡或者首页预渲染
这2种方法都是能够提示用户体验的方法，使用的原理都相同,vue项目启动会在index.html中找到id=app的div并将内容挂载进去，那么项目未启动前index.html中div.#app这个元素中的内容将会显示给用户查看，那么我们可以将一个比较小的GIF图或者一段内容放在此处，项目启动后将会自动清理完毕。其实我们团队有好几个项目都采用了首页预渲染的方式，但是我个人感觉现在的方式有个巨大缺陷且收益微小，所以我负责的项目暂时未采用首页预加载，我个人推荐使用GIF图进行过渡

5.服务器渲染(SSR)
解决问题的终极解决方案，将用户加载压力转移至服务器，但是不适合我们项目，所以未启用

6.渐进式方案(PWA)
能够实现项目非首次秒加载，项目已成功启用且上线

//动态加载的方法如下所示
//动态加载完毕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
    }
  }