在本篇文章裡我們給大家整理了一篇關於優化VUE項目的四個總要點,寫的十分的全面細緻,具有一定的參考價值,對此有需要的朋友可以參考學習下。如有不足之處,歡迎批評指正。
運行時優化
1、使用v-if代替v-show
兩者的區別是:v-if不渲染DOM,v-show會預渲染DOM
除以下情況使用v-show,其他情況儘量使用v-if
有預渲染需求
需要頻繁切換顯示狀態
2、v-for必須加上key,並避免同時使用v-if
一般我們在兩種常見的情況下會傾向於這樣做:
為了過濾一個列表中的項目
比如 v-for="user in users" v-if="user.isActive"。在這種情形下,請將 users替換為一個計算屬性 (比如 activeUsers),讓其返回過濾後的列表
為了避免渲染本應該被隱藏的列表
比如 v-for="user in users" v-if="shouldShowUsers"。這種情形下,請將 v-if 移動至容器元素上 (比如 ul, ol)
3、事件及時銷燬
Vue組件銷燬時,會自動清理它與其它實例的連接,解綁它的全部指令及事件監聽器,但是僅限於組件本身的事件。
也就是說,在js內使用addEventListener等方式是不會自動銷燬的,我們需要在組件銷燬時手動移除這些事件的監聽,以免造成內存洩露,如:
created() {
addEventListener('touchmove', this.touchmove, false)
},
beforeDestroy() {
removeEventListener('touchmove', this.touchmove, false)
}//在此我向大家推薦一個前端全棧開發交流圈:619586920 突破技術瓶頸,提升思維能力
首屏優化
1、圖片裁剪、使用webp
- 圖片需要裁剪,一般使用二倍圖即可
- 儘量使用webp圖片
- 如果使用了vue-lazyload插件,可以使用以下方法一鍵替換webp(替換使用v-lazy指令的圖片)
Vue.use(VueLazyload, {
error: require('./assets/img/defaultpic_small.png'),
filter: {
webp (listener: any, options: any) {
if (!options.supportWebp) return
// listener.src += '.webp'
}//在此我向大家推薦一個前端全棧開發交流圈:619586920 突破技術瓶頸,提升思維能力
}
});
2、資源提前請求
經測試,Vue項目中各文件的加載順序為:router.js、main.js、App.vue、[-page-].vue、[component].vue,如圖:
其中,router的加載時間相比於page.vue快近100ms,如果page.vue的文件較多,時間差異會更大
所以,可以在頁面掛載、渲染的同時去請求接口數據,如在router.js中請求數據:
import Router from 'vue-router'
import store from './store'
//在此我向大家推薦一個前端全棧開發交流圈:619586920 突破技術瓶頸,提升思維能力
store.dispatch('initAjax')
3、異步路由
使用異步路由可以根據URL自動加載所需頁面的資源,並且不會造成頁面阻塞,較適用於移動端頁面
建議主頁面直接import,非主頁面使用異步路由
使用方式:
{
path: '/order',
component: () => import('./views/order.vue')
}
4、異步組件
不需要首屏加載的組件都使用異步組件的方式來加載(如多tab),包括需要觸發條件的動作也使用異步組件(如彈窗)
使用方式為:v-if來控制顯示時機,引入組件的Promise即可
<template>
<hellowworld>
/<template>
5、使用輕量級插件、異步插件
使用webpack-bundle-analyzer查看項目所有包的體積大小,較大的插件包儘量尋找輕量級的替代方案
首屏用不到的插件、或只在特定場景才會用到的插件使用異步加載(如定位插件,部分情況可以通過URL傳遞經緯度;或生成畫報插件,需要在點擊時觸發);插件第一次加載後緩存在本地,使用方式為:
// 以定位插件為例
const latitude = getUrlParam('latitude')
const longitude = getUrlParam('longitude')
// 如果沒有經緯度參數,則使用定位插件來獲取經緯度
if (!latitude || !longitude) {
// 首次加載定位插件
// webpack4寫法,若使用webpack3及以下,則await import('locationPlugin')即可
if (!this.WhereAmI) this.WhereAmI = (await import('locationPlugin')).default
// do sth...//在此我向大家推薦一個前端全棧開發交流圈:619586920 突破技術瓶頸,提升思維能力
}
6、公用CDN
使用公用的CDN資源,可以起到緩存作用,並減少打包體積
網絡優化
1、減少網絡請求
瀏覽器對同一時間針對同一域名下的請求有一定數量限制(一般是6個),超過限制數目的請求會被阻塞
首屏儘可能減少同域名的請求,包括接口和js;按需減少首屏的chunk.js,合併接口請求
2、合理使用preload、dns-prefetch、prefetch
preload具有較高的加載優先級,它可以利用間隙時間預加載資源,將加載和執行分離開,不阻塞渲染和document的onload事件
每次與域名連接都需要進行DNS解析,使用dns-prefetch可以預解析域名的DNS
prefetch會預加載頁面將來可能用到的一些資源,優先級較低;對首屏渲染要求較高的項目不建議使用
三者的使用方式,在head標籤中添加(vue-cli-3已經做了相應配置):
<link>
<link>
<title>md-config/<title>
<link>
<link>
<link>
<link>
3、PWA
PWA支持緩存HTML文檔、接口(get)等,降低頁面白屏時間
這樣即使在弱網甚至斷網情況下,也能迅速展示出頁面
編譯打包優化
1、升級Vue-Cli-3
vue-cli-3採用webpack4+babel7,對編譯打包方面做了很多優化(成倍的提升),使用yarn作為包管理工具,並且對很多優化的最佳實踐做了默認配置
經測試,將項目從vue-cli-2遷移到vue-cli-3之後,速度變化為:
編譯時間:44s --> 7s
打包時間:55s --> 11s
效率提升非常明顯
2、SSR
對加載性能要求較高的項目建議升級SSR
結語
感謝您的觀看,如有不足之處,歡迎批評指正。
對前端的技術,前端全棧技術感興趣的同學關注我的頭條號,並在後臺私信發送關鍵字:“前端”即可獲取免費的前端開發攻城師學習資料
知識體系已整理好,歡迎免費領取。還有視頻分享可以免費獲取。關注我,可以獲得沒有的經驗哦!
閱讀更多 前端攻城小牛 的文章