1. 程式人生 > >vue-chat項目之重構與體驗優化

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

iss ror 渲染 translate 項目 基本 local .com eai

前言

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項目之重構與體驗優化