vue网站加载速度优化

1.减小入口文件的体积

通常使用的手段是路由懒加载，开启路由懒加载之后，带请求的页面会单独打包js文件，使得入口文件index.js变小

路由懒加载：延迟加载或按需加载

方法是使用vue异步组件或者ES6的import

异步组件：component：resolve=>(require(['需要加载的路由的地址'])，resolve)

import Vue from 'vue'

import Router from 'vue-router'　

/* 此处省去之前导入的HelloWorld模块 */

Vue.use(Router)

export default new Router({ 

     routes: [ 

     { 

         path: '/', 

         name: 'HelloWorld',

        component: resolve=>(require(["@/components/HelloWorld"],resolve))

    }

 ]

})

ES6的import：const HelloWorld = （）=>import('需要加载的模块地址')

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

const HelloWorld = ()=>import("@/components/HelloWorld")

export default new Router({ 

 routes: [ 

     { 

         path: '/', 

         name: 'HelloWorld',

        component:HelloWorld

    } 

 ]

})

2.静态资源本地化

HTTP缓存：设置Cache-Control，Last-Modifled等响应头

Service Worker离线缓存

3.开始GZip压缩

压缩页面，可以变为原来大小的30%甚至更小，实际上就是服务器端压缩，传到浏览器后解压并解析

4.使用ssr：使用服务器渲染