代碼絕不止能跑就行，但是廢話只說(shuō)一句：碼字不易求個(gè)，???。

一、代碼優(yōu)化

v-for 中使用 key

使用 v-for 更新已渲染的元素列表時(shí)，默認(rèn)用就地復(fù)用策略；列表數(shù)據(jù)修改的時(shí)候，他會(huì)根據(jù) key 值去判斷某個(gè)值是否修改，如果修改，則重新渲染這一項(xiàng)，否則復(fù)用之前的元素；

使用key的注意事項(xiàng)：

不要使用可能重復(fù)的或者可能變化 key 值（控制臺(tái)也會(huì)給出提醒）不要使用數(shù)組的 index 作為 key 值，因?yàn)槿绻跀?shù)組中插入一個(gè)元素時(shí)，其后面的元素 index 將會(huì)變化。如果數(shù)組中沒(méi)有唯一的 key 值可用，可以考慮對(duì)其添加一個(gè) key 字段，值為 Symbol() 即可保證唯一。

v-if/v-else-if/v-else 中使用 key

可能很多人都會(huì)忽略這個(gè)點(diǎn)

原因：默認(rèn)情況下，Vue 會(huì)盡可能高效的更新 DOM。這意味著其在相同類型的元素之間切換時(shí)，會(huì)修補(bǔ)已存在的元素，而不是將舊的元素移除然后在同一位置添加一個(gè)新元素。如果本不相同的元素被識(shí)別為相同，則會(huì)出現(xiàn)意料之外的副作用。

如果只有一個(gè) v-if ，沒(méi)有 v-else 或者 v-if-else的話，就沒(méi)有必要加 key 了

相對(duì)于 v-for 的 key， v-if/v-else-if/v-else 中的 key 相對(duì)簡(jiǎn)單，我們可以直接寫(xiě)入固定的字符串或者數(shù)組即可

  <transition>    <button       v-if="isEditing"      v-on:click="isEditing = false"    >      Save    </button>    <button       v-else       v-on:click="isEditing = true"    >      Edit    </button>  </transition>復(fù)制代碼

.v-enter-active, .v-leave-active {  transition: all 1s;}.v-enter, .v-leave-to {  opacity: 0;  transform: translateY(30px);}.v-leave-active {  position: absolute;}復(fù)制代碼

例如對(duì)于上面的代碼， 你會(huì)發(fā)現(xiàn)雖然對(duì) button 添加了 過(guò)渡效果， 但是如果不添加 key 切換時(shí)是無(wú)法觸發(fā)過(guò)渡的

v-for 和 v-if 不要一起使用（Vue2）

此優(yōu)化技巧僅限于Vue2，Vue3 中對(duì) v-for 和 v-if 的優(yōu)先級(jí)做了調(diào)整

這個(gè)大家都知道

永遠(yuǎn)不要把 v-if 和 v-for 同時(shí)用在同一個(gè)元素上。 引至 Vue2.x風(fēng)格指南

原因是 v-for 的 優(yōu)先級(jí)高于 v-if，所以當(dāng)它們使用再同一個(gè)標(biāo)簽上是，每一個(gè)渲染都會(huì)先循環(huán)再進(jìn)行條件判斷

注意： Vue3 中 v-if 優(yōu)先級(jí)高于 v-for，所以當(dāng) v-for 和 v-if 一起使用時(shí)效果類似于 Vue2 中把 v-if 上提的效果

例如下面這段代碼在 Vue2 中是不被推薦的，Vue 也會(huì)給出對(duì)應(yīng)的警告

<ul>  <li v-for="user in users" v-if="user.active">    {{ user.name }}  </li></ul>復(fù)制代碼

我們應(yīng)該盡量將 v-if 移動(dòng)到上級(jí) 或者 使用 計(jì)算屬性來(lái)處理數(shù)據(jù)

<ul v-if="active">  <li v-for="user in users">    {{ user.name }}  </li></ul>復(fù)制代碼

如果你不想讓循環(huán)的內(nèi)容多出一個(gè)無(wú)需有的上級(jí)容器，那么你可以選擇使用 template 來(lái)作為其父元素，template 不會(huì)被瀏覽器渲染為 DOM 節(jié)點(diǎn)

如果我想要判斷遍歷對(duì)象里面每一項(xiàng)的內(nèi)容來(lái)選擇渲染的數(shù)據(jù)的話，可以使用 computed 來(lái)對(duì)遍歷對(duì)象進(jìn)行過(guò)濾

// jslet usersActive = computed(()=>users.filter(user => user.active))// template<ul>    <li v-for="user in usersActive">      {{ user.name }}    </li></ul>復(fù)制代碼

合理的選擇 v-if 和 v-show

v-if 和 v-show 的區(qū)別相比大家都非常熟悉了； v-if 通過(guò)直接操作 DOM 的刪除和添加來(lái)控制元素的顯示和隱藏；v-show 是通過(guò)控制 DOM 的 display CSS熟悉來(lái)控制元素的顯示和隱藏

由于對(duì) DOM 的 添加/刪除 操作性能遠(yuǎn)遠(yuǎn)低于操作 DOM 的 CSS 屬性

所以當(dāng)元素需要頻繁的 顯示/隱藏 變化時(shí)，我們使用 v-show 來(lái)提高性能。

當(dāng)元素不需要頻繁的 顯示/隱藏 變化時(shí)，我們通過(guò) v-if 來(lái)移除 DOM 可以節(jié)約掉瀏覽器渲染這個(gè)的一部分DOM需要的資源

使用簡(jiǎn)單的 計(jì)算屬性

應(yīng)該把復(fù)雜計(jì)算屬性分割為盡可能多的更簡(jiǎn)單的 property。

易于測(cè)試 當(dāng)每個(gè)計(jì)算屬性都包含一個(gè)非常簡(jiǎn)單且很少依賴的表達(dá)式時(shí)，撰寫(xiě)測(cè)試以確保其正確工作就會(huì)更加容易。 易于閱讀 簡(jiǎn)化計(jì)算屬性要求你為每一個(gè)值都起一個(gè)描述性的名稱，即便它不可復(fù)用。這使得其他開(kāi)發(fā)者 (以及未來(lái)的你) 更容易專注在他們關(guān)心的代碼上并搞清楚發(fā)生了什么。 更好的“擁抱變化” 任何能夠命名的值都可能用在視圖上。舉個(gè)例子，我們可能打算展示一個(gè)信息，告訴用戶他們存了多少錢；也可能打算計(jì)算稅費(fèi)，但是可能會(huì)分開(kāi)展現(xiàn)，而不是作為總價(jià)的一部分。 小的、專注的計(jì)算屬性減少了信息使用時(shí)的假設(shè)性限制，所以需求變更時(shí)也用不著那么多重構(gòu)了。

引至 Vue2風(fēng)格指南

computed 大家后很熟悉， 它會(huì)在其表達(dá)式中依賴的響應(yīng)式數(shù)據(jù)發(fā)送變化時(shí)重新計(jì)算。如果我們?cè)谝粋€(gè)計(jì)算屬性中書(shū)寫(xiě)了比較復(fù)雜的表達(dá)式，那么其依賴的響應(yīng)式數(shù)據(jù)也任意變得更多。當(dāng)其中任何一個(gè)依賴項(xiàng)變化時(shí)整個(gè)表達(dá)式都需要重新計(jì)算

let price = computed(()=>{  let basePrice = manufactureCost / (1 - profitMargin)  return (      basePrice -      basePrice * (discountPercent || 0)  )})復(fù)制代碼

當(dāng) manufactureCost、profitMargin、discountPercent 中任何一個(gè)變化時(shí)都會(huì)重新計(jì)算整個(gè) price。

但是如果我們改成下面這樣

let basePrice = computed(() => manufactureCost / (1 - profitMargin))let discount = computed(() => basePrice * (discountPercent || 0))let finalPrice = computed(() => basePrice - discount)復(fù)制代碼

如果當(dāng) discountPercent 變化時(shí)，只會(huì) 重新計(jì)算 discount 和 finalPrice，由于 computed 的緩存特性，不會(huì)重新計(jì)算 basePrice

functional 函數(shù)式組件（Vue2）

注意，這僅僅在 Vue2 中被作為一種優(yōu)化手段，在 3.x 中，有狀態(tài)組件和函數(shù)式組件之間的性能差異已經(jīng)大大減少，并且在大多數(shù)用例中是微不足道的。因此，在 SFCs 上使用 functional 的開(kāi)發(fā)人員的遷移路徑是刪除該 attribute，并將 props 的所有引用重命名為 $props，將 attrs 重命名為 $attrs。

優(yōu)化前

<template>     <div class="cell">         <div v-if="value" class="on"></div>         <section v-else class="off"></section>     </div> </template> <script> export default {     props: ['value'], } </script>復(fù)制代碼

優(yōu)化后

<template functional>     <div class="cell">         <div v-if="props.value" class="on"></div>         <section v-else class="off"></section>     </div> </template> <script> export default {     props: ['value'], } </script>復(fù)制代碼

沒(méi)有this（沒(méi)有實(shí)例）沒(méi)有響應(yīng)式數(shù)據(jù)

拆分組件

什么？你寫(xiě)的一個(gè)vue文件有一千多行代碼？

合理的拆分組件不僅僅可以優(yōu)化性能，還能夠讓代碼更清晰可讀。單一功能原則嘛

源自 slides/akryum/vuec…

優(yōu)化前

<template>  <div :style="{ opacity: number / 300 }">    <div>{{ heavy() }}</div>  </div></template><script>export default {  props: ['number'],  methods: {    heavy () {  }  }}</script>復(fù)制代碼

優(yōu)化后

<template>  <div :style="{ opacity: number / 300 }">    <ChildComp/>  </div></template><script>export default {  props: ['number'],  components: {    ChildComp: {      methods: {        heavy () {  }      },      render (h) {        return h('div', this.heavy())      }    }  }}</script>復(fù)制代碼

由于 Vue 的更新是組件粒度的，雖然每一幀都通過(guò)數(shù)據(jù)修改導(dǎo)致了父組件的重新渲染，但是 ChildComp 卻不會(huì)重新渲染，因?yàn)樗膬?nèi)部也沒(méi)有任何響應(yīng)式數(shù)據(jù)的變化。所以優(yōu)化后的組件不會(huì)在每次渲染都執(zhí)行耗時(shí)任務(wù)

使用局部變量

優(yōu)化前

<template>  <div :style="{ opacity: start / 300 }">{{ result }}</div></template><script>import { heavy } from '@/utils'export default {  props: ['start'],  computed: {    base () { return 42 },    result () {      let result = this.start      for (let i = 0; i < 1000; i++) {        result += heavy(this.base)      }      return result    }  }}</script>復(fù)制代碼

優(yōu)化后

<template>  <div :style="{ opacity: start / 300 }">    {{ result }}</div></template><script>import { heavy } from '@/utils'export default {  props: ['start'],  computed: {    base () { return 42 },    result () {      const base = this.base      let result = this.start      for (let i = 0; i < 1000; i++) {        result += heavy(base)      }      return result    }  }}</script>復(fù)制代碼

這里主要是優(yōu)化前后的組件的計(jì)算屬性 result 的實(shí)現(xiàn)差異，優(yōu)化前的組件多次在計(jì)算過(guò)程中訪問(wèn) this.base，而優(yōu)化后的組件會(huì)在計(jì)算前先用局部變量 base，緩存 this.base，后面直接訪問(wèn) base。

那么為啥這個(gè)差異會(huì)造成性能上的差異呢，原因是你每次訪問(wèn) this.base 的時(shí)候，由于 this.base 是一個(gè)響應(yīng)式對(duì)象，所以會(huì)觸發(fā)它的 getter，進(jìn)而會(huì)執(zhí)行依賴收集相關(guān)邏輯代碼。類似的邏輯執(zhí)行多了，像示例這樣，幾百次循環(huán)更新幾百個(gè)組件，每個(gè)組件觸發(fā) computed 重新計(jì)算，然后又多次執(zhí)行依賴收集相關(guān)邏輯，性能自然就下降了。

從需求上來(lái)說(shuō)，this.base 執(zhí)行一次依賴收集就夠了，把它的 getter 求值結(jié)果返回給局部變量 base，后續(xù)再次訪問(wèn) base 的時(shí)候就不會(huì)觸發(fā) getter，也不會(huì)走依賴收集的邏輯了，性能自然就得到了提升。

引至 揭秘 Vue.js 九個(gè)性能優(yōu)化技巧

使用 KeepAlive

在一些渲染成本比較高的組件需要被經(jīng)常切換時(shí)，可以使用 keep-alive 來(lái)緩存這個(gè)組件

而在使用 keep-alive 后，被 keep-alive 包裹的組件在經(jīng)過(guò)第一次渲染后，的 vnode 以及 DOM 都會(huì)被緩存起來(lái)，然后再下一次再次渲染該組件的時(shí)候，直接從緩存中拿到對(duì)應(yīng)的 vnode 和 DOM，然后渲染，并不需要再走一次組件初始化，render 和 patch 等一系列流程，減少了 script 的執(zhí)行時(shí)間，性能更好。

注意： 濫用 keep-alive 只會(huì)讓你的應(yīng)用變得更加卡頓，因?yàn)樗麜?huì)長(zhǎng)期占用較大的內(nèi)存

事件的銷毀

當(dāng)一個(gè)組件被銷毀時(shí)，我們應(yīng)該清除組件中添加的 全局事件 和 定時(shí)器 等來(lái)防止內(nèi)存泄漏

Vue3 的 HOOK 可以讓我們將事件的聲明和銷毀寫(xiě)在一起，更加可讀

function scrollFun(){ }document.addEventListener("scroll", scrollFun)onBeforeUnmount(()=>{  document.removeEventListener("scroll", scrollFun)})復(fù)制代碼

Vue2 依然可以通過(guò) $once 來(lái)做到這樣的效果，當(dāng)然你也可以在 optionsAPI beforeDestroy 中銷毀事件，但是我更加推薦前者的寫(xiě)法，因?yàn)楹笳邥?huì)讓相同功能的代碼更分散

function scrollFun(){ }document.addEventListener("scroll", scrollFun)this.$once('hook:beforeDestroy', ()=>{  document.addEventListener("scroll", scrollFun)})復(fù)制代碼

function scrollFun(){ }export default {  created() {    document.addEventListener("scroll", scrollFun)  },  beforeDestroy(){    document.addEventListener("scroll", scrollFun)  }}復(fù)制代碼

圖片加載

圖片懶加載：適用于頁(yè)面上有較多圖片且并不是所有圖片都在一屏中展示的清空，vue-lazyload 插件給我們提供了一個(gè)很方便的懶加載指令 v-lazy

但是并不是所有圖片都適合使用懶加載，例如 banner、相冊(cè)等 更加推薦使用圖片預(yù)加載技術(shù)，將當(dāng)前展示圖片的前一張和后一張優(yōu)先下載。

采用合理的數(shù)據(jù)處理算法

這個(gè)相對(duì)比較考驗(yàn) 數(shù)據(jù)結(jié)構(gòu)和算法 的功底

例如一個(gè)將數(shù)組轉(zhuǎn)化為多級(jí)結(jié)構(gòu)的方法

function listToTree (list,idKey,parIdKey,parId) {    let map = {};    let result = [];    let len = list.length;    // 構(gòu)建map    for (let i = 0; i < len; i++) {        //將數(shù)組中數(shù)據(jù)轉(zhuǎn)為鍵值對(duì)結(jié)構(gòu) (這里的數(shù)組和obj會(huì)相互引用，這是算法實(shí)現(xiàn)的重點(diǎn))        map[list[i][idKey]] = list[i];    }    // 構(gòu)建樹(shù)形數(shù)組    for(let i=0; i < len; i++) {        let itemParId = list[i][parIdKey];        // 頂級(jí)節(jié)點(diǎn)        if(itemParId === parId) {            result.push(list[i]);            continue;        }        // 孤兒節(jié)點(diǎn)，舍棄(不存在其父節(jié)點(diǎn))        if(!map[itemParId]){            continue;        }        // 將當(dāng)前節(jié)點(diǎn)插入到父節(jié)點(diǎn)的children中（由于是引用數(shù)據(jù)類型，obj中對(duì)于節(jié)點(diǎn)變化，result中對(duì)應(yīng)節(jié)點(diǎn)會(huì)跟著變化）        if(map[itemParId].children) {            map[itemParId].children.push(list[i]);        } else {            map[itemParId].children = [list[i]];        }    }    return result;}復(fù)制代碼

其他

除了上面說(shuō)的方法以外還有很多優(yōu)化技巧，只是我在項(xiàng)目并不是太常用

凍結(jié)對(duì)象（避免不需要響應(yīng)式的數(shù)據(jù)變成響應(yīng)式）長(zhǎng)列表渲染-分批渲染長(zhǎng)列表渲染-動(dòng)態(tài)渲染（vue-virtual-scroller）...

二、首屏/體積優(yōu)化

我在項(xiàng)目中關(guān)于首屏優(yōu)化主要有以下幾個(gè)優(yōu)化方向

體積代碼分割網(wǎng)絡(luò)

體積優(yōu)化

壓縮打包代碼: webpack 和 vite 的生產(chǎn)環(huán)境打包默認(rèn)就會(huì)壓縮你的代碼，這個(gè)一般不需要特殊處理，webpack 也可以通過(guò)對(duì)應(yīng)的壓縮插件手動(dòng)實(shí)現(xiàn)取消 source-map: 可以查看你的打包產(chǎn)物中是否有 .map 文件，如果有你可以將 source-map 的值設(shè)置為false或者空來(lái)關(guān)閉代碼映射（這個(gè)占用的體積是真的大）打包啟用 gizp 壓縮: 這個(gè)需要服務(wù)器也開(kāi)啟允許 gizp 傳輸，不然啟用了也沒(méi)啥用（ webpack 有對(duì)應(yīng)的 gzip 壓縮插件，不太版本的 webpack 壓縮插件可能不同，建議先到官網(wǎng)查詢）

代碼分割

代碼分割的作用的將打包產(chǎn)物分割為一個(gè)一個(gè)的小產(chǎn)物，其依賴 esModule。所以當(dāng)你使用 import() 函數(shù)來(lái)導(dǎo)入一個(gè)文件或者依賴，那么這個(gè)文件或者依賴就會(huì)被單獨(dú)打包為一個(gè)小產(chǎn)物。 路由懶加載 和 異步組件 都是使用這個(gè)原理。

路由懶加載異步組件

對(duì)于 UI庫(kù) 我一般不會(huì)使用按需加載組件，而是比較喜歡 CDN 引入的方式來(lái)優(yōu)化。

三、網(wǎng)絡(luò)

CDN： 首先就是上面的說(shuō)的 CDN 引入把，開(kāi)發(fā)階段使用本地庫(kù)，通過(guò)配置 外部擴(kuò)展(Externals) 打包時(shí)來(lái)排除這些依賴。然后在 html 文件中通過(guò) CDN 的方式來(lái)引入它們

Server Push： HTTP2已經(jīng)相對(duì)成熟了；經(jīng)過(guò)上面的 CDN 引入，我們可以對(duì)網(wǎng)站使用 HTTP2 的 Server Push 功能來(lái)讓瀏覽器提前加載 這些 CDN 和 其他文件。

開(kāi)啟 gzip： 這個(gè)上面已經(jīng)說(shuō)過(guò)了，其原理就是當(dāng)客戶端和服務(wù)端都支持 gzip 傳輸時(shí)，服務(wù)端會(huì)優(yōu)先發(fā)送經(jīng)過(guò) gzip 壓縮過(guò)的文件，然后客戶端接收到在進(jìn)行解壓。

開(kāi)啟緩存： 一般我使用的是協(xié)商緩存，但是這并不適用于所有情況，例如對(duì)于使用了 Server Push 的文件，就不能隨意的修改其文件名。所以我一般還會(huì)將生產(chǎn)的主要文件固定文件名


作者：月夕
鏈接：juejin/post/7005880217684148231
來(lái)源：掘金