作者：月夕 (已獲轉(zhuǎn)載授權(quán))

鏈接：https://juejin.cn/post/7005880217684148231

演示代碼使用 Vue3 + ts + Vite 編寫(xiě)，但是也會(huì)列出適用于 Vue2 的優(yōu)化技巧，如果某個(gè)優(yōu)化只適用于 Vue3 或者 Vue2，我會(huì)在標(biāo)題中標(biāo)出來(lái)。

一、代碼優(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ù)組中的數(shù)據(jù)有狀態(tài)需要維持時(shí)（例如輸入框），不要使用數(shù)組的 index 作為 key 值，因?yàn)槿绻跀?shù)組中插入或者移除一個(gè)元素時(shí)，其后面的元素 index 將會(huì)變化，這回讓vue進(jìn)行原地復(fù)用時(shí)錯(cuò)誤的綁定狀態(tài)。
• 如果數(shù)組中沒(méi)有唯一的 key值可用，且數(shù)組更新時(shí)不是全量更新而是采用類(lèi)似push，splice來(lái)插入或者移除數(shù)據(jù)時(shí)，可以考慮對(duì)其添加一個(gè) key 字段，值為 Symbol() 即可保證唯一。

何時(shí)使用何種key？

這是一個(gè)非常有考究的問(wèn)題，首先你要知道 vue 中的 原地復(fù)用 （大概就是 虛擬dom 變化時(shí)，兩個(gè) 虛擬dom節(jié)點(diǎn) 的 key 如果一樣就不會(huì)重新創(chuàng)建節(jié)點(diǎn)，而是修改原來(lái)的節(jié)點(diǎn)）

當(dāng)我們渲染的數(shù)據(jù)不需要保持狀態(tài)時(shí)，例如常見(jiàn)的單純的表格分頁(yè)渲染（不包含輸入，只是展示）、下拉加載更多等場(chǎng)景，那么使用 index 作為 key 再好不過(guò)，因?yàn)檫M(jìn)入下一頁(yè)或者上一頁(yè)時(shí)就會(huì)原地復(fù)用之前的節(jié)點(diǎn)，而不是重新創(chuàng)建，如果使用唯一的 id 作為 key 反而會(huì)重新創(chuàng)建dom，性能相對(duì)較低。

此外使用 index 作為 key 我還應(yīng)該要盡量避免對(duì)數(shù)組的中間進(jìn)行 增加/刪除 等會(huì)影響后面元素key變化的操作。這會(huì)讓 vue 認(rèn)為后面所有元素都發(fā)生了變化，導(dǎo)致多余的對(duì)比和原地復(fù)用。

所以使用 index 作為 key 需要滿(mǎn)足：

1. 數(shù)據(jù)沒(méi)有獨(dú)立的狀態(tài)
2. 數(shù)據(jù)不會(huì)進(jìn)行 增加/刪除 等會(huì)影響后面元素key變化的操作

哪何時(shí)使用 id 作為 key 呢？

對(duì)于大多數(shù)數(shù)據(jù)的 id 都是唯一的，這無(wú)疑的一個(gè) key 的優(yōu)選答案。對(duì)于任何大多數(shù)情況使用 id 作為 key 都不會(huì)出現(xiàn)上面 bug。但是如果你需要考慮性能問(wèn)題，那就就要思考是否應(yīng)該使用原地復(fù)用了。

同樣是上面的分頁(yè)數(shù)據(jù)展示，如果使用 id 作為 key ，可想而知每一頁(yè)的每一條數(shù)據(jù) id 都是不一樣的，所以當(dāng)換頁(yè)時(shí)兩顆 虛擬DOM樹(shù) 的節(jié)點(diǎn)的 key 完全不一致，vue 就會(huì)移除原來(lái)的節(jié)點(diǎn)然后創(chuàng)建新的節(jié)點(diǎn)?？上攵蕰?huì)更加低下。但是他也有它的優(yōu)點(diǎn)。唯一的 key 可以幫助 diff 更加精確的為我們綁定狀態(tài)，這尤其適合數(shù)據(jù)有獨(dú)立的狀態(tài)的場(chǎng)景，例如帶輸入框或者單選框的列表數(shù)據(jù)。

所以何時(shí)使用 id 作為 key？只有一點(diǎn)：

1. 無(wú)法使用 index 作為 key 的時(shí)候

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

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

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

如果只有一個(gè) v-if ，沒(méi)有 v-else 或者 v-if-else的話(huà)，就沒(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>

.v-enter-active,?.v-leave-active?{
??transition:?all?1s;
}
.v-enter,?.v-leave-to?{
??opacity:?0;
??transform:?translateY(30px);
}
.v-leave-active?{
??position:?absolute;
}

例如對(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)格指南^[1]

原因是 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í)效果類(lèi)似于 Vue2 中把 v-if 上提的效果

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

<ul>
??<li?v-for="user?in?users"?v-if="user.active">
????{{?user.name?}}
??li>
ul>

我們應(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>

如果你不想讓循環(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ù)的話(huà)，可以使用 computed 來(lái)對(duì)遍歷對(duì)象進(jìn)行過(guò)濾

//?js
let?usersActive?=?computed(()=>users.filter(user?=>?user.active))

//?template
<ul>
????<li?v-for="user?in?usersActive">
??????{{?user.name?}}
????li>
ul>

合理的選擇 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)單且很少依賴(lài)的表達(dá)式時(shí)，撰寫(xiě)測(cè)試以確保其正確工作就會(huì)更加容易。

• 易于閱讀

  簡(jiǎn)化計(jì)算屬性要求你為每一個(gè)值都起一個(gè)描述性的名稱(chēng)，即便它不可復(fù)用。這使得其他開(kāi)發(fā)者 (以及未來(lái)的你) 更容易專(zhuān)注在他們關(guān)心的代碼上并搞清楚發(fā)生了什么。

• 更好的“擁抱變化”

  任何能夠命名的值都可能用在視圖上。舉個(gè)例子，我們可能打算展示一個(gè)信息，告訴用戶(hù)他們存了多少錢(qián)；也可能打算計(jì)算稅費(fèi)，但是可能會(huì)分開(kāi)展現(xiàn)，而不是作為總價(jià)的一部分。

  小的、專(zhuān)注的計(jì)算屬性減少了信息使用時(shí)的假設(shè)性限制，所以需求變更時(shí)也用不著那么多重構(gòu)了。

引至 Vue2風(fēng)格指南^[2]

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

let?price?=?computed(()=>{
??let?basePrice?=?manufactureCost?/?(1?-?profitMargin)
??return?(
??????basePrice?-
??????basePrice?*?(discountPercent?||?0)
??)
})

當(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)

如果當(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>

優(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>

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

拆分組件

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

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

源自 slides.com/akryum/vuec…^[3]

優(yōu)化前

<template>
??<div?:style="{?opacity:?number?/?300?}">
????<div>{{?heavy()?}}div>
??div>
template>

<script>
export?default?{
??props:?['number'],
??methods:?{
????heavy?()?{?/*?HEAVY?TASK?*/?}
??}
}
script>

優(yōu)化后

<template>
??<div?:style="{?opacity:?number?/?300?}">
????<ChildComp/>
??div>
template>

<script>
export?default?{
??props:?['number'],
??components:?{
????ChildComp:?{
??????methods:?{
????????heavy?()?{?/*?HEAVY?TASK?*/?}
??????},
??????render?(h)?{
????????return?h('div',?this.heavy())
??????}
????}
??}
}
script>

由于 Vue 的更新是組件粒度的，雖然每一幀都通過(guò)數(shù)據(jù)修改導(dǎo)致了父組件的重新渲染，但是?ChildComp?卻不會(huì)重新渲染，因?yàn)樗膬?nèi)部也沒(méi)有任何響應(yīng)式數(shù)據(jù)的變化。所以?xún)?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>

優(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>

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

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

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

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

使用 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)存

事件的銷(xiāo)毀

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

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

function?scrollFun(){?/*?...?*/}
document.addEventListener("scroll",?scrollFun)

onBeforeUnmount(()=>{
??document.removeEventListener("scroll",?scrollFun)
})

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

function?scrollFun(){?/*?...?*/}
document.addEventListener("scroll",?scrollFun)

this.$once('hook:beforeDestroy',?()=>{
??document.removeEventListener("scroll",?scrollFun)
})

function?scrollFun(){?/*?...?*/}

export?default?{
??created()?{
????document.addEventListener("scroll",?scrollFun)
??},
??beforeDestroy(){
????document.removeEventListener("scroll",?scrollFun)
??}
}

圖片加載

圖片懶加載：適用于頁(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)的方法

/**
?*?數(shù)組轉(zhuǎn)樹(shù)形結(jié)構(gòu),時(shí)間復(fù)雜度O(n)
?*?@param?list?數(shù)組
?*?@param?idKey?元素id鍵
?*?@param?parIdKey?元素父id鍵
?*?@param?parId?第一級(jí)根節(jié)點(diǎn)的父id值
?*?@return?{[]}
?*/
function?listToTree?(list,idKey,parIdKey,parId)?{
????let?map?=?{};
????let?result?=?[];
????let?len?=?list.length;

????//?構(gòu)建map
????for?(let?i?=?0;?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?????????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ù)類(lèi)型，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;
}

其他

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

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

二、 首屏/體積優(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)查詢(xún)）

代碼分割

代碼分割的作用的將打包產(chǎn)物分割為一個(gè)一個(gè)的小產(chǎn)物，其依賴(lài) esModule。所以當(dāng)你使用 import() 函數(shù)來(lái)導(dǎo)入一個(gè)文件或者依賴(lài)，那么這個(gè)文件或者依賴(lài)就會(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)排除這些依賴(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)客戶(hù)端和服務(wù)端都支持 gzip 傳輸時(shí)，服務(wù)端會(huì)優(yōu)先發(fā)送經(jīng)過(guò) gzip 壓縮過(guò)的文件，然后客戶(hù)端接收到在進(jìn)行解壓。

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

參考資料