前端pc，移动性能优化

1.由于移动端touchstart事件对象的cancelable属性为true,它的默认行为可以被监听器通过preventDefault()方法阻止,如果你在滑动过程中默认行为被阻止了，页面就必须静止不动,r如果绑定了监听事件的话，因为浏览器无法提前知道你是否会调用preventDefault(),它能做的只有等监听器执行完后再去执行默认行为，而监听器是要耗时间的，这样就会导致在滑动时页面卡顿
所以我们在vue种可以采用
<div v-on:scroll.passive="onScroll">...</div>
Passive这种修饰符来提高移动端性能
2.此方法在PC和移动端均可以优化
路由懒加载:当打包构建应用时，js包会变得非常大,影响页面加载,我们可以对不同路由分割，当路由被访问时才加载对应组件，结合vue的异步组件和webpack代码分割，实现懒加载

(1)第一种方法就是es6的import()方法(按需加载)
{
      path:'/home',
      name:'home',
      component:() => import("@/components/HelloWorld")
    }

(2)Vue的异步组件，require()方法（按需加载）
{
      path:'/login',
      name:'login',
      component:resolve => 
        require(["@/components/HelloWorld"], resolve),
    }
(3)vue的异步组件+webpack的ensure()方法
const HelloWorld = r => require.ensure([], () => r(require('@/components/HelloWorld')), 'HelloWorld')
目前webpack不推荐使用此种方法