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

前言

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.增長曆史記錄功能

下面的歷史記錄也能夠查看啦。

對比

由於服務器比較渣，因此仍是能體諒這個速度，咱們主要看先後對比時間。 
重構前： 

重構後： 

比較之下仍是有很大的改善的。剩下的本身慢慢體會吧。