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.增加歷史記錄功能
下面的歷史記錄也可以查看啦。
對比
因為服務器比較渣,所以還是能體諒這個速度,我們主要看前後對比時間。
重構前:
重構後:
比較之下還是有很大的改善的。剩下的自己慢慢體會吧。
vue-chat項目之重構與體驗優化