前言

vue-chat 也就是我的幾個月之前寫的一個基於vue的實時聊天項目，到目前為止已經快滿400star了，註冊量也已經超過了1700+，消息量達2000+，由於一直在實習，沒有時間對它頻繁地更新，趁著這個國慶，對他進行了一次重構，希望我的經驗對大家有幫助。有寶貴的意見請在issue提給我。
舊版本：
https://github.com/hua1995116/webchat/tree/v1.2.0
新版本：
https://github.com/hua1995116/webchat/tree/dev
可以說這也是一個穩定版本，但是代碼細節方面存在許多的不堪。
所以我從以下幾個大方面進行了優化
線上地址：http://www.qiufengh.com:9090/#/

前面兩個版本的介紹：
vue+websocket+express+mongodb實戰項目（實時聊天）（一）
vue+websocket+express+mongodb實戰項目（實時聊天）（二）

代碼結構

1.梳理項目目錄結構

原目錄：

新目錄

主要是多了一個api目錄，view目錄和一個Basetransition.vue文件。
api的作用為對axios的統一處理
view使得頁面和組件分離，因為一般寫都是混在一起，會導致不太清楚
Basetransition.vue為一個切換特效的基本文件

2.對每個頁面的結構進行整改

這裏不細說，具體看每個頁面，主要是對一些可以在單頁內使用的data，去除了vuex。使得每個頁面具有其通用性，去除了耦合性。

3.將公共工具utils抽取出來

裏面有三個工具，

分別為處理時間，localStoragec存儲，處理url的query參數
4.頁面與組件分離

剛才講了，將components 分離出來，分離成真正的組件以及頁面。

5.axios進行了統一的處理

api下的axios.js對axios進行了統一的處理
包括，響應出錯，響應超時

import axios from ‘axios‘

const baseURL = ‘‘


const instance = axios.create()

instance.defaults.timeout = 30000 // 所有接口30s超時

// 請求統一處理
instance.interceptors.request.use(async config => {
  if (config.url && config.url.charAt(0) === ‘/‘) {
    config.url = `${baseURL}${config.url}`
  }

  return config
}, error => Promise.reject(error))

// 對返回的內容做統一處理
instance.interceptors.response.use(response => {
  if (response.status === 200) {
    return response
  }
  return Promise.reject(response)
}, error => {
  if (error) {
    console.log(JSON.stringify(error))
  } else {
    console.log(‘出了點問題，暫時加載不出來，請稍後再來吧‘)
  }
  return Promise.reject(error)
})

export default instance
 

6.運用了async await，ES7的特性

大量運用了async/await 新特性，使得更好的處理異步，使得代碼更加簡化，例如，處理首頁是否登錄
src/view/loan.vue

async mounted() {
  const uerId = getItem(‘userid‘)
  if (!uerId) {
    await Confirm({
      title: ‘提示‘,
      content: ‘請先登錄‘
    })
    this.$router.push({ path: ‘login‘ })
  } else {
    this.$store.commit(‘setTab‘, true)
  }
},

代碼性能

1.壓縮所有圖片

利用 https://tinypng.com/
進行了對所有圖片的壓縮，以及手動對一些尺寸大的圖片進行壓縮，
例如，項目中只需要用到80*80像素的圖片，實際上服務器傳了一張200*200的，所以手動進行了對圖片調整。

2.所有請求，統一采用先加載頁面，再進行請求，體驗優化

在之前的版本，是讓請求和切換頁面同時進行，所以在切換的過程過，會出現卡頓的現象。。現在，我將移到了頁面的mounted中，並且加入了loading動畫，為了展示loading動畫，特別搞了點小動作，因為我們的項目“太快了“！！“太快了“！！“太快了“！！，我怕你們看不到這個動畫。以下src/view/chat.vue為例子，刪除了一些不利於閱讀的代碼。

mounted() {
  loading.show()
  setTimeout(async () => {
    await this.$store.dispatch(‘getMessHistory‘, {roomid: this.roomid})
    loading.hide()
    this.isLoadingAchieve = true
//        window.scroll(0, 10000)
  }, 1000)
},

體驗優化

1.切換路由動畫

切換的順序，主要參考了這位大哥的思路，
https://github.com/zhengguorong/pageAinimate並且在他的基礎上，我再進行了優化，讓我們的項目頁面切換變成了牛逼哄哄的樣子。
“順暢的不像話“，看起來分不清楚是app還是h5

可以看我的Basetransition.vue頁面。

script

  export default {
    data () {
      return {
        transitionName: ‘slide-left‘
      }
    },
    beforeRouteUpdate (to, from, next) {
      let isBack = this.$router.isBack
      if (isBack) {
        this.transitionName = ‘slide-right‘
      } else {
        this.transitionName = ‘slide-left‘
      }
      this.$router.isBack = false
      next()
    }
  }

css

.slide-left-enter{
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
  .slide-left-leave-active {
    -webkit-transform: translate(-100px, 0);
    transform: translate(-100px, 0);
  }
  .slide-right-enter {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
  }
  .slide-right-leave-active {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }

核心主要是這兩段代碼。

當舊的路由（舊的頁面）被新的路由（頁面）替換，其實在一般的app中你可以看到新的頁面滑進來，舊的頁面一般都是會往左偏移一段距離，我們正是實現了這樣的一個過程。並且通過一個屬性isBack來判斷進入和退出所需要的動畫方向。

還有一個就是退出的時候，我們需要將child-view設置overflow:hidden,因為我們這個聊天組件的時候，需要渲染許多dom，所以如果讓文檔溢出的話，會出現卡頓的效果。

2.首頁加載速度性能提升（移除首頁所有不必要的請求）

在我們本來的項目中，首頁有載入許多圖片，現在移除了所有不必要的圖片。

3.加入loading, 優化處理

4.加入靜態組件，仿蘋果彈窗(Alert, confirm)

5.加入用戶緩存機制，不必每次刷新重新登錄了

我們可以使用utils下的localStorage.js，setItem這個函數，
setItem(key, value, duration)，參數分別為，屬性名，屬性值，緩存時長。

6.增加歷史記錄功能

下面的歷史記錄也可以查看啦。

對比

因為服務器比較渣，所以還是能體諒這個速度，我們主要看前後對比時間。
重構前：

重構後：

比較之下還是有很大的改善的。剩下的自己慢慢體會吧。

vue-chat項目之重構與體驗優化