Vue性能优化

性能优化的手段

目标：降低打包后文件大小，提高首屏加载速度

手段：

1.懒加载

运用懒加载则可以将路由对应的页面组件独立分开，
路由被访问时候，再加载对应的组件页面，
防止首页一次性加载太多信息，造成用户等待时间过长的问题

实现方式:
1.异步组件 promise
方法1

import Header form '@/components/head'
components:{
    headerNav:(resolve)=>{
        setTimeout(()=>{
            resolve(Header)
        },2000)
    }
}

方法2

components:{
    headerNav:(resolve)=>{
        setTimeout(()=>{
            resolve(require('@/components/head'))
        },2000)
    }
}

2.webpack代码分割 require.ensure ，只会加载一次，反复触发不会反复加载
1.写法1

let Head = (resolve)=>{
    return require.ensure([],()=>{
        resolve(require('@/components/head'))
    },"xxx")
}

格式：

let Head = (resolve)=>{
    return require.ensure([依赖],回调函数)
}

写法1特殊功能：
xxx是可选项，可以不写，但是如果有多个写了这个相同参数的，会被打包成一个JS文件

2.写法2 (无法完成多个组件合并)

let Head = (resolve)=>{
    return import('@/components/head')
}

写法2 没有写法1的代码合并功能