前言

大家好啊,，我是wangly19,，一名前端摸魚(yú)小能手,。最近忙著開(kāi)源項(xiàng)目的東西，還有公司項(xiàng)目的迭代問(wèn)題,，導(dǎo)致更新文章的頻率有點(diǎn)低了,。也來(lái)聊聊我在干嘛吧。

第一個(gè)事情就是比較我的閹割版UI Design,，要開(kāi)始Vue3.0的開(kāi)發(fā)工作,，所以近期都在看Vue3.0的東西。 其次就是和UI配套的方法庫(kù),，也是我近期的一個(gè)項(xiàng)目,，是一個(gè)Typescript生產(chǎn)的小東西。希望能夠?qū)τ诖蠹矣幸恍椭?/p>

eleganceUI框架：Github倉(cāng)庫(kù)

這篇文章呢,，主要是做一個(gè)Vue性能優(yōu)化的帖子,，做一個(gè)參考文檔,，對(duì)以后項(xiàng)目上線做一些集合文檔。如果對(duì)各位在項(xiàng)目?jī)?yōu)化時(shí),，做一個(gè)文檔參照,。

開(kāi)發(fā)過(guò)程

在開(kāi)發(fā)項(xiàng)目的時(shí)候，就要注意項(xiàng)目的一些小技巧,，下面我就羅列一些經(jīng)常用到的優(yōu)化的方法吧,。同時(shí)老規(guī)矩，查缺補(bǔ)漏,。

優(yōu)先使用vIf

vIf 和 vShow 理論上都是作用于元素的顯示隱藏,，只是一個(gè)是直接對(duì)DOM，一個(gè)是通過(guò)CSS的 display 來(lái)操作的,，在項(xiàng)目中大部分的時(shí)候我都是直接使用 vIf 直接代替使用 vShow ,，只有當(dāng)DOM頻繁進(jìn)行顯示和隱藏的時(shí)候，但是這種場(chǎng)景非常少見(jiàn),，我只在信息推送優(yōu)先級(jí)中使用過(guò),，項(xiàng)目中一直通過(guò) WebSocket 推的消息進(jìn)行消息的場(chǎng)景遇到過(guò)，頻繁推送不同類(lèi)型的通知,。

vFor和vIf不要一起使用

1,、vFor 的優(yōu)先級(jí)其實(shí)是比 vIF 高的，所以當(dāng)兩個(gè)指令出現(xiàn)來(lái)一個(gè)DOM中,，那么 vFor 渲染的當(dāng)前列表,，每一次都需要進(jìn)行一次 vIf 的判斷。而相應(yīng)的列表也會(huì)重新變化,，這個(gè)看起來(lái)是非常不合理的,。因此當(dāng)你需要進(jìn)行同步指令的時(shí)候。盡量使用計(jì)算屬性,，先將 vIf 不需要的值先過(guò)濾掉,。他看起像是下面這樣的。
2,、前端技術(shù)是不斷更新的,。順便給大家點(diǎn)福利吧，送你們2020最新企業(yè)級(jí)別Vue3.0/Js/ES6/TS/React/node等實(shí)戰(zhàn)視頻教程,，想學(xué)的可進(jìn)裙 519293536 免費(fèi)獲取,，小白勿進(jìn)哦！

// 計(jì)算屬性
computed: {
  filterList: function () {
  return this.showData.filter(function (data) {
    return data.isShow
  })
}
  
// DOM
  
<ul>
  <li v-for="item in filterList" :key="item.id">
  {{ item.name }}
  </li>
</ul>
復(fù)制代碼

其實(shí)大家都知道 vFor 是不推薦使用 index 下標(biāo)來(lái)作為 key 的值,，這是一個(gè)非常好理解的知識(shí)點(diǎn),，可以從圖中看到，當(dāng)index作為標(biāo)識(shí)的時(shí)候，插入一條數(shù)據(jù)的時(shí)候,，列表中它后面的key都發(fā)生了變化,，那么當(dāng)前的 vFor 都會(huì)對(duì)key變化的 Element 重新渲染，但是其實(shí)它們除了插入的 Element 數(shù)據(jù)都沒(méi)有發(fā)生改變,，這就導(dǎo)致了沒(méi)有必要的開(kāi)銷(xiāo),。所以，盡量不要用index作為標(biāo)識(shí),，而去采用數(shù)據(jù)中的唯一值,，如 id 等字段。

什么是資源? 每創(chuàng)建出一個(gè)事物都需要消耗資源,，資源不是憑空產(chǎn)生的,，是分配出來(lái)的。所以說(shuō),，當(dāng)組件銷(xiāo)毀后,，盡量把我們開(kāi)辟出來(lái)的資源塊給銷(xiāo)毀掉，比如 setInterval , addEventListener等,，如果你不去手動(dòng)給釋放掉,，那么它們依舊會(huì)占用一部分資源。這就導(dǎo)致了沒(méi)有必要的資源浪費(fèi),。多來(lái)幾次后,，可以想象下資源占用率肯定是上升的。

添加的事件

created() {
  addEventListener('click', Function, false)
},
beforeDestroy() {
  removeEventListener('click', Function false)
}
復(fù)制代碼

定時(shí)器

created() {
  this.currentInterVal = setInterval(code,millisec,lang)
},
beforeDestroy() {
  clearInterval(this.currentInterVal)
}
復(fù)制代碼

長(zhǎng)列表

項(xiàng)目當(dāng)中,，會(huì)涉及到非常多的長(zhǎng)列表場(chǎng)景,，區(qū)別于普通的分頁(yè)來(lái)說(shuō)，大部分的前端在做這種 無(wú)限列表 的時(shí)候,，大部分新手前端都是通過(guò)一個(gè) vFor 將數(shù)據(jù)遍歷出來(lái),，想的多一點(diǎn)的就是做一個(gè)分頁(yè)。滾動(dòng)到底部的時(shí)候就繼續(xù)請(qǐng)求 API ,。其實(shí)這也是未思考妥當(dāng)?shù)?。隨著數(shù)據(jù)的加載，DOM會(huì)越來(lái)越多,，這樣就導(dǎo)致了性能開(kāi)銷(xiāo)的問(wèn)題產(chǎn)生了,，當(dāng)頁(yè)面上的DOM太多的時(shí)候，難免給我的客戶(hù)端造成一定的壓力,，所以對(duì)于長(zhǎng)列表渲染的時(shí)候，建議將DOM移除掉,，類(lèi)似于圖片懶加載的模式,，只有出現(xiàn)在視圖上的DOM才是重要的DOM。網(wǎng)絡(luò)上有一些很好的解決方案，如 vue-virtual-scroller 庫(kù)等等,，大家可以理性的選擇,。

圖片合理的優(yōu)化方式

圖片應(yīng)該都不陌生吧，在網(wǎng)頁(yè)中,，往往存在大量的圖片資源,，這些資源或大或小。當(dāng)我們頁(yè)面中DOM中存在大量的圖片時(shí),，難免不會(huì)碰到一些加載緩慢的問(wèn)題,，導(dǎo)致圖片出現(xiàn)加載失敗的問(wèn)題。網(wǎng)絡(luò)上大部分都在使用 懶加載 的使用方式,，只有當(dāng) 存在圖片的DOM 出現(xiàn)在頁(yè)面上才會(huì)進(jìn)行圖片的加載,，無(wú)形中起到了分流的作用，下面就說(shuō)一套實(shí)踐的方案吧

• 小圖標(biāo)使用 SVG 或者字體圖標(biāo)
• 通過(guò) base64 和 webp  的方式加載小型圖片
• 能通過(guò)cdn加速的大圖盡量用cdn
• 大部分框架都帶有懶加載的圖片,，不要嫌麻煩,，多花點(diǎn)時(shí)間使用它

路由器按需加載

對(duì)于路由的懶加載，如果還不會(huì)的話,，那么就真該好好的重新去學(xué)習(xí)一下了,。路由懶加載的方式有兩種，一種是require 另一種是 import ,。當(dāng)路由按需加載后,，那么Vue服務(wù)在第一次加載時(shí)的壓力就能夠相應(yīng)的小一些，不會(huì)出現(xiàn) 超長(zhǎng)白屏P0問(wèn)題 ,。下面是兩種路由懶加載的寫(xiě)法：

// require法
component: resolve=>(require(['@/components/HelloWorld'],resolve))

// import
component: () => import('@/components/HelloWorld')
復(fù)制代碼

UI框架使用方式

確保在使用UI框架如,， Element ， And Design 等UI框架的時(shí)候,，都使用官方給暴露出來(lái)的按需加載組件,。只有真正用到它的時(shí)候時(shí)候才會(huì)加載當(dāng)前UI框架的組件，而不是一開(kāi)始就將整個(gè)組件庫(kù)給加載出來(lái),，我們都知道,，一個(gè)UI框架其實(shí)很大，相對(duì)比其他的東西來(lái)說(shuō),。因此,，它在方便我們開(kāi)發(fā)者的同時(shí)，也無(wú)形中產(chǎn)生了多余的開(kāi)銷(xiāo),。但是項(xiàng)目周期開(kāi)發(fā)的時(shí)候,，不得不依賴(lài)它。所以建議盡量的使用按需加載,。合理的對(duì)項(xiàng)目進(jìn)行止損,，如果你不在意,，非常嫌麻煩，那么可以進(jìn)行全局引入,。

import { Button } from 'xxxx
復(fù)制代碼

首屏優(yōu)化

眾所周知,，第一次打開(kāi)Vue的時(shí)候，如果你的項(xiàng)目夠大,，那么首次加載資源時(shí),，會(huì)非常的久。由于資源沒(méi)有加載完畢,，界面的DOM也不會(huì)渲染,，會(huì)造成白屏的問(wèn)題。用戶(hù)此時(shí)并不知道是加載的問(wèn)題,，所以會(huì)帶來(lái)一個(gè)不好的體驗(yàn),。因此通常會(huì)在public下寫(xiě)一個(gè)加載動(dòng)畫(huà)，告訴用戶(hù),，網(wǎng)頁(yè)在加載中這個(gè)提示,。當(dāng)頁(yè)面加載成功后，頁(yè)面渲染出來(lái)的這一個(gè)體驗(yàn)比白屏等開(kāi)機(jī)要好太多了,。因此,，推薦大家都設(shè)計(jì)一個(gè)自家公司的loading加載方式放入index.html中吧。

項(xiàng)目過(guò)程

最小化JS文件

可以通過(guò)webpack處理打包的JavaScript文件,，讓其更加的精簡(jiǎn),。在配置中，你可以這么做

config.optimization.minimize(true);
復(fù)制代碼

圖片資源壓縮

可以通過(guò) image-webpack-loader 插件對(duì)打包的圖片進(jìn)行壓縮,，看起來(lái)會(huì)對(duì)圖片的加載有一些提升,。如果擔(dān)心破壞圖片，可以放棄使用它,。

“ 

$ yarn add  image-webpack-loader

- - QAQ

config.module
  .rule('images')
  .use('image-webpack-loader')
  .loader('image-webpack-loader')
  .options({
    bypassOnDebug: true
  })
  .end()
復(fù)制代碼

打包公共代碼

在 webpack4 中,，可以通過(guò) optimization.minimize 將公共代碼進(jìn)行打包，雖然我個(gè)人認(rèn)為這個(gè)東西對(duì)SPA應(yīng)用來(lái)說(shuō),，效果其實(shí)有限,，但有勝于無(wú)，文字再小也是肉不是,，所以說(shuō),，在細(xì)節(jié)的把控上，永遠(yuǎn)是無(wú)止境的,。但是在webpack4中也是將CommonsChunkPlugin 改用 SplitChunksPlugin 了,。感覺(jué)評(píng)論掘友的提醒。

new webpack.optimize.CommonsChunkPlugin({
  name: ['vendor','runtime'],
  filename: '[xxxxx].js'
})
復(fù)制代碼

刪除沉淀代碼

使用 Tree-Shaking 插件可以將一些無(wú)用的沉淀泥沙代碼給清理掉,。

依賴(lài)庫(kù)CDN加速

看到有小伙伴使用CDN的方式引入一些依賴(lài)包,，覺(jué)得非常的 Nice ,，然后我也開(kāi)始使用了,。我將 Vue Axios Echarts 等等都分離了出來(lái),，在正式環(huán)境下，通過(guò)CDN,，確實(shí)有了一些明顯的提升,，所以說(shuō)大家可以進(jìn)行嘗試。

CDN LinkDI地址：BootCDN

// 在html引入script標(biāo)簽后,。在vue的配置中,，進(jìn)行聲明

configureWebpack: {
  externals: {
    'echarts': 'echarts' // 配置使用CDN
  }
}
復(fù)制代碼

GZIP

這個(gè)東西需要后端進(jìn)行配置，當(dāng)然,，如果你有操作 Nginx 的權(quán)限的話,，那么可以自己開(kāi)啟，反正我認(rèn)為,，這個(gè)東西提升還是很大的,。具體的可以看這篇文章。這里不過(guò)多贅述這個(gè)東西,。 Vue CLI 2&3 下的項(xiàng)目?jī)?yōu)化實(shí)踐 —— CDN + Gzip + Prerender

后話

項(xiàng)目?jī)?yōu)化是非常重要的,，一絲一毫的提升都是對(duì)用戶(hù)的負(fù)責(zé)。另外前端技術(shù)是不斷更新的,。順便給大家點(diǎn)福利吧,，送你們2020最新企業(yè)級(jí)別Vue3.0/Js/ES6/TS/React/node等實(shí)戰(zhàn)視頻教程，想學(xué)的可進(jìn)裙 519293536 免費(fèi)獲取,，小白勿進(jìn)哦,！

本文的文字及圖片來(lái)源于網(wǎng)絡(luò)加上自己的想法,僅供學(xué)習(xí)、交流使用,不具有任何商業(yè)用途,版權(quán)歸原作者所有,如有問(wèn)題請(qǐng)及時(shí)聯(lián)系我們以作處理