1、減小入口文件體積
常用的手段是路由懶加載，把不同路由對(duì)應(yīng)的組件切割成不同的代碼塊，待路由被請(qǐng)求的時(shí)候會(huì)單獨(dú)打包路由，使得入口文件變小，加載速度大大增加。
在vue-router 配置路由的時(shí)候，采用動(dòng)態(tài)加載路由的形式

router:[
        path:"Blogs",
        name:'ShowBlogs',
        component:()=>import('./components/ShowBlogs.vue)

以函數(shù)的形式加載路由，這樣就可以把各自的路由文件分別打包，只有在解析給定的路由時(shí)，才會(huì)加載路由組件。

2、靜態(tài)資源本地緩存
后端返回資源問(wèn)題：
1. 采用HTTP緩存，設(shè)置Cache-Control, Last-Modified,Etag等響應(yīng)頭
2.采用Service Worker離線緩存
前端合理利用 localStorage
3、UI框架按需加載
在日常使用UI框架，例如element-UI、或者antd,我們經(jīng)常性直接引用整個(gè)UI庫(kù)

import ElementUI from 'element-ui'
Vue.use(ElementUI)

但實(shí)際上我們用到的組件只有按鈕，分頁(yè)，表格，輸入與警告 所以我們按需引用

import { Button,Input,Pagination,TableColum,MessageBox} from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(pagination)

3、組件重復(fù)打包
假設(shè)A.js文件是一個(gè)常用的庫(kù)，現(xiàn)在有多個(gè)路由使用A.js文件，這就造成了重復(fù)下載
解決方案：在webpack的config文件中，修改CommonsChunkPlugin的配置

minChunks:3

minChunks 為3表示會(huì)把使用3次及以上的包抽離出來(lái)，放進(jìn)公共依賴文件，避免了重復(fù)加載組件
3、圖片資源壓縮
圖片資源雖然不在編碼過(guò)程中，但它卻是對(duì)頁(yè)面性能影響最大的因素，對(duì)于所有的圖片資源，我們可以進(jìn)行適當(dāng)?shù)膲嚎s。 對(duì)頁(yè)面上使用到的icon，可以使用在線字體圖標(biāo)，或者雪碧圖，將眾多的小圖標(biāo)合并到同一張圖上，用以減輕http請(qǐng)求壓力。
4、開(kāi)啟Gzip壓縮
拆完包之后，我們?cè)谟胓zip做一下壓縮 安裝compression-webpack-plugin

cnpm i  compression-webpack-plugin -D

在vue.congig.js 中引入并修改webpack配置

const CompressionPlugin = require('compression-webpak-plugin')
configureWebpack: (config)=>{
       if(process.env.NODE_ENV === 'production'){
//為生產(chǎn)環(huán)境修改配置...
config.mode = 'production'
     return {
        plugins:[new CompressionPlugin({
            test:/\.js$|\.html$|\.css/, //匹配文件名
          threshold:10240,//對(duì)超過(guò)10k的數(shù)據(jù)進(jìn)行壓縮
          deleteOriginalAssets: false //是否刪除原文件
       })]
   }
}

在服務(wù)器我們也要做相應(yīng)的配置 如果發(fā)送請(qǐng)求的瀏覽器支持gzip，就發(fā)送給它gzip格式的文件 我的服務(wù)器是用express框架搭建的，只要安裝一下compression就能使用

const compression = require('compression')
app.use(compression())//在其他中間件使用之前調(diào)用
5、使用SRR
ssr(server side) 也就是服務(wù)器端渲染 組件或者頁(yè)面通過(guò)服務(wù)器生成html字符串，再發(fā)送到瀏覽器 從頭搭建一個(gè)服務(wù)器端渲染是很復(fù)雜的，vue應(yīng)用建議Nuxt.js實(shí)現(xiàn)服務(wù)器端渲染