前言

本文是自己在實際專案中總結的幾點較為實用的Vue的性能優化，希望能對大家實際專案以及面試產生幫助，

一、gzip壓縮

gizp壓縮是一種http請求優化方式，通過減少檔案體積來提高加載速度，html、js、css檔案甚至json資料都可以用它壓縮，可以減小60%以上的體積，(需要后端支持)

1. 安裝npm i compression-webpack-plugin -D

2. vue.config.js檔案里配置

// 導包
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 匹配檔案名
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
// 配置
module.exports = {
 configureWebpack: config => {
   if (process.env.NODE_ENV === 'production') {
     return {
       plugins: [
         new CompressionWebpackPlugin({
           filename: '[path].gz[query]',
           algorithm: 'gzip',  // 默認為gzip
           test: productionGzipExtensions,
           threshold: 2048, // 對超過2k的資料進行壓縮 
           minRatio: 0.8,  // 僅壓縮比該比率更好的（minRatio = Compressed Size / Original Size）
           deleteOriginalAssets: false  // 是否洗掉原檔案
         })
       ]
     }
   }
 }
}

3.運行npm run build

gzip壓縮后,通過gzip壓縮可以使Vue首頁加載速度大大提升,以下是壓縮前與壓縮后

4.添加打包分析可以更具體的查看

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
   // 構建體積分析
   chainWebpack: config => {
     config
       .plugin('webpack-bundle-analyzer')
       .use(BundleAnalyzerPlugin)
       .init(Plugin => new Plugin())
   }
}

執行npm run build --report

5.參考資料:

CompressionWebpack插件

二、路由懶加載(按需加載)

當打包構建應用時，JavaScript 包會變得非常大，影響頁面加載，如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了，

1.在路由配置中import方法實作路由懶加載

代碼如下（示例）：

const router = new VueRouter({
  routes: [
    { path: '/foo', component: () => import('./Foo.vue') }
  ]
})

2.參考資料

vue官方檔案路由懶加載

二、第三方插件的按需引入(按需加載)

以Vant為例，借助 babel-plugin-import ，可以只引入需要的組件，以達到減少體積的目的

1.安裝插件

npm i babel-plugin-import -D

2.在.babelrc 中添加配置

// 在.babelrc 中添加配置
// 注意：webpack 1 無需設定 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

3.按需加載組件

// 接著你可以在代碼中直接引入 Vant 組件
// 插件會自動將代碼轉化為方式二中的按需引入形式
import { Button } from 'vant';

4.參考資料:

Vant自動按需引入組件

三、減少介面請求

1.每次路由跳轉或者反復多次重繪時重新向服務器發送請求時取消上一次發送的介面請求

• 請求攔截器js檔案中設定

// 取消請求
let cancelArr = []
window.cancelAxios = function (url, allAxios = false) {
  cancelArr = cancelArr.filter(item => {
    if (allAxios) {
      item.c()
      return false
    } else {
      if (item.url === url) {
        item.c()
        return false
      } else {
        return true
      }
    }
  })
}
// 請求攔截器
_fetch.interceptors.request.use(
  function (config) {
    window.cancelAxios(config.url)
    config.cancelToken = new axios.CancelToken(cancel => {
      cancelArr.push({
        url: config.url,
        c: cancel
      })
    })
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)

• 路由配置里的前置守衛

// 前置守衛
router.beforeEach((to, from, next) => {
  // 每次跳轉路由取消所有請求
  window.cancelAxios('', true)
}

2.keep-alive頁面快取

當你希望某個頁面不被重新渲染,就可以使用Vue的keep-alive組件,不僅可以快取當前頁面資料,還可以避免多次重復渲染降低性能，

• 在組件中給name

export default {
  name: 'article',
  // keep-alive的生命周期
  // 初次進入時：created > mounted > activated
  // 再次進入：只會觸發 activated
  activated () {
    // to do..
  },
  // 退出后觸發 deactivated
  deactivated () {
    // to do..
  }
}

• 在路由出口處用keep-alive組件包裹住

  <!-- 路由出口 -->
   <!-- include - 字串或正則運算式，只有名稱匹配的組件會被快取，
        exclude - 字串或正則運算式，任何名稱匹配的組件都不會被快取，
        max - 數字，最多可以快取多少組件實體， -->
    <keep-alive include="article">
      <router-view></router-view>
    </keep-alive>

• 參考資料
  Vue官方檔案

3.防抖節流

1.防抖工具型方法封裝

  function debounce (fnEvent, time) {
          var _time = null
          return function () {
            let _arg = arguments
            let _this = this
            if (_time) {
              clearTimeout(_time)
            }
            _time = setTimeout(() => {
              fnEvent.apply(_this, _arg)
            }, time)
          }
        }

2.節流工具型方法封裝

  function throttle (fnEvent, time) {
        var isLoading = false
        return function () {
          let _arg = arguments
          if (!isLoading) {
            isLoading = true
            let _this = this
            setTimeout(() => {
              fnEvent.apply(_this, _arg)
              isLoading = false
            }, time)
          }
        }
      }

四、利用Object.freeze()實作vue長串列性能優化

vue利用Object.defineProperty中的setter和geeter來對資料物件進行劫持，來實作視圖回應資料的變化，然而有些時候我們的組件就是純粹的資料展示，不會有任何改變，我們就不需要 vue來劫持我們的資料，在大量資料展示的情況下，這能夠很明顯的減少組件初始化的時間，那如何禁止 vue劫持我們的資料呢？可以通過 object.freeze方法來凍結一個物件，一旦被凍結的物件就再也不能被修改了，

• Object.freeze()介紹
  Object.freeze() 方法可以凍結一個物件，一個被凍結的物件再也不能被修改；凍結了一個物件則不能向這個物件添加新的屬性，不能洗掉已有屬性，不能修改該物件已有屬性的可列舉性、可配置性、可寫性，以及不能修改已有屬性的值，此外，凍結一個物件后該物件的原型也不能被修改，freeze() 回傳和傳入的引數相同的物件，
  

總結

以上僅僅是Vue專案性能優化的一部分，以后有時間還會給大家繼續更新，感謝！！！