回答此問題應(yīng)從三個方面著手
1）Vue 代碼層面的優(yōu)化勤哗；
2）webpack 配置層面的優(yōu)化；
3）基礎(chǔ)的 Web 技術(shù)層面的優(yōu)化
一：代碼層面的優(yōu)化
1.1掩驱、v-if 與 v-show區(qū)分使用場景
1.1.1手段：v-if是通過控制dom節(jié)點的存在與否來控制元素的顯隱芒划；v-show是通過設(shè)置DOM元素的display樣式冬竟，block為顯示，none為隱藏民逼；
1.1.2.編譯過程：v-if切換有一個局部編譯/卸載的過程泵殴，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件；v-show只是簡單的基于css切換拼苍；
1.1.3.編譯條件：v-if是惰性的笑诅，如果初始條件為假，則什么也不做疮鲫；只有在條件第一次變?yōu)檎鏁r才開始局部編譯（編譯被緩存吆你？編譯被緩存后，然后再切換的時候進行局部卸載); v-show是在任何條件下（首次條件是否為真）都被編譯棚点，然后被緩存，而且DOM元素保留湾蔓；
1.1.4.性能消耗：v-if有更高的切換消耗瘫析；v-show有更高的初始渲染消耗；
1.2默责、computed 和 watch 區(qū)分使用場景
computed：是計算屬性贬循，依賴其它屬性值，并且 computed 的值有緩存桃序，只有它依賴的屬性值發(fā)生改變杖虾，下一次獲取 computed 的值時才會重新計算 computed 的值；
watch：更多的是「觀察」的作用媒熊，類似于某些數(shù)據(jù)的監(jiān)聽回調(diào) 奇适，每當(dāng)監(jiān)聽的數(shù)據(jù)變化時都會執(zhí)行回調(diào)進行后續(xù)操作；
運用場景：
當(dāng)我們需要進行數(shù)值計算芦鳍，并且依賴于其它數(shù)據(jù)時嚷往，應(yīng)該使用 computed，因為可以利用 computed 的緩存特性柠衅，避免每次獲取值時皮仁，都要重新計算；
當(dāng)我們需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時菲宴，應(yīng)該使用 watch贷祈，使用 watch 選項允許我們執(zhí)行異步操作 ( 訪問一個 API )，限制我們執(zhí)行該操作的頻率喝峦，并在我們得到最終結(jié)果前势誊，設(shè)置中間狀態(tài)。這些都是計算屬性無法做到的谣蠢。
1.3键科、v-for 遍歷必須為 item 添加 key闻丑，且避免同時使用 v-if
1.3.1 v-for 遍歷必須為 item 添加 key
在列表數(shù)據(jù)進行遍歷渲染時，需要為每一項 item 設(shè)置唯一 key 值勋颖，方便 Vue.js 內(nèi)部機制精準找到該條列表數(shù)據(jù)嗦嗡。當(dāng) state 更新時，新的狀態(tài)值和舊的狀態(tài)值對比饭玲，較快地定位到 diff 侥祭。
1.3.2 v-for 遍歷避免同時使用 v-if
v-for 比 v-if 優(yōu)先級高，如果每一次都需要遍歷整個數(shù)組茄厘，將會影響速度矮冬，尤其是當(dāng)之需要渲染很小一部分的時候，必要情況下應(yīng)該替換成 computed 屬性次哈。
1.4胎署、長列表性能優(yōu)化
Vue 會通過 Object.defineProperty 對數(shù)據(jù)進行劫持，來實現(xiàn)視圖響應(yīng)數(shù)據(jù)的變化窑滞，然而有些時候我們的組件就是純粹的數(shù)據(jù)展示琼牧，不會有任何改變，我們就不需要 Vue 來劫持我們的數(shù)據(jù)哀卫，在大量數(shù)據(jù)展示的情況下巨坊，這能夠很明顯的減少組件初始化的時間，那如何禁止 Vue 劫持我們的數(shù)據(jù)呢此改？可以通過 Object.freeze 方法來凍結(jié)一個對象趾撵，一旦被凍結(jié)的對象就再也不能被修改了。
```
export default {
? data: () => ({
? ? users: {}
? }),
? async created() {
? ? const users = await axios.get("/api/users");
? ? this.users = Object.freeze(users);
? }
};
```
1.5共啃、事件的銷毀
Vue 組件銷毀時占调，會自動清理它與其它實例的連接，解綁它的全部指令及事件監(jiān)聽器移剪，但是僅限于組件本身的事件妈候。如果在 js 內(nèi)使用 addEventListene 等方式是不會自動銷毀的，我們需要在組件銷毀時手動移除這些事件的監(jiān)聽挂滓，以免造成內(nèi)存泄露苦银，如：
created() {
? addEventListener('click', this.click, false)
},
beforeDestroy() {
? removeEventListener('click', this.click, false)
}
1.6、圖片資源懶加載
對于圖片過多的頁面赶站，為了加速頁面加載速度幔虏，所以很多時候我們需要將頁面內(nèi)未出現(xiàn)在可視區(qū)域內(nèi)的圖片先不做加載， 等到滾動到可視區(qū)域后再去加載贝椿。這樣對于頁面加載性能上會有很大的提升想括，也提高了用戶體驗。我們在項目中使用 Vue 的 vue-lazyload 插件：
1.7烙博、路由懶加載
Vue 是單頁面應(yīng)用瑟蜈，可能會有很多的路由引入 烟逊，這樣使用 webpcak 打包后的文件很大，當(dāng)進入首頁時铺根，加載的資源過多宪躯，頁面會出現(xiàn)白屏的情況，不利于用戶體驗位迂。如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊访雪，然后當(dāng)路由被訪問的時候才加載對應(yīng)的組件，這樣就更加高效了掂林。這樣會大大提高首屏顯示的速度臣缀，但是可能其他的頁面的速度就會降下來。
1.8泻帮、第三方插件的按需引入
我們在項目中經(jīng)常會需要引入第三方插件精置，如果我們直接引入整個插件，會導(dǎo)致項目的體積太大锣杂，我們可以借助babel-plugin-component脂倦，然后可以只引入需要的組件，以達到減小項目體積的目的
1.9蹲堂、優(yōu)化無限列表性能
如果你的應(yīng)用存在非常長或者無限滾動的列表狼讨，那么需要采用?窗口化?的技術(shù)來優(yōu)化性能贝淤，只需要渲染少部分區(qū)域的內(nèi)容柒竞，減少重新渲染組件和創(chuàng)建 dom 節(jié)點的時間。你可以參考以下開源項目 vue-virtual-scroll-list 和 vue-virtual-scroller 來優(yōu)化這種無限列表的場景的播聪。
1.10朽基、服務(wù)端渲染 SSR or 預(yù)渲染
服務(wù)端渲染是指 Vue 在客戶端將標簽渲染成的整個 html 片段的工作在服務(wù)端完成，服務(wù)端形成的 html 片段直接返回給客戶端這個過程就叫做服務(wù)端渲染离陶。
（1）服務(wù)端渲染的優(yōu)點：
更好的 SEO：因為 SPA 頁面的內(nèi)容是通過 Ajax 獲取稼虎，而搜索引擎爬取工具并不會等待 Ajax 異步完成后再抓取頁面內(nèi)容，所以在 SPA 中是抓取不到頁面通過 Ajax 獲取到的內(nèi)容招刨；而 SSR 是直接由服務(wù)端返回已經(jīng)渲染好的頁面（數(shù)據(jù)已經(jīng)包含在頁面中）霎俩，所以搜索引擎爬取工具可以抓取渲染好的頁面；
更快的內(nèi)容到達時間（首屏加載更快）：SPA 會等待所有 Vue 編譯后的 js 文件都下載完成后沉眶，才開始進行頁面的渲染打却，文件下載等需要一定的時間等，所以首屏渲染需要一定的時間谎倔；SSR 直接由服務(wù)端渲染好頁面直接返回顯示柳击，無需等待下載 js 文件及再去渲染等，所以 SSR 有更快的內(nèi)容到達時間片习；
（2）服務(wù)端渲染的缺點：
更多的開發(fā)條件限制：例如服務(wù)端渲染只支持 beforCreate 和 created 兩個鉤子函數(shù)捌肴，這會導(dǎo)致一些外部擴展庫需要特殊處理蹬叭，才能在服務(wù)端渲染應(yīng)用程序中運行；并且與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序 SPA 不同状知，服務(wù)端渲染應(yīng)用程序秽五，需要處于 Node.js server 運行環(huán)境；
更多的服務(wù)器負載：在 Node.js 中渲染完整的應(yīng)用程序试幽，顯然會比僅僅提供靜態(tài)文件的 server 更加大量占用CPU 資源筝蚕，因此如果你預(yù)料在高流量環(huán)境下使用，請準備相應(yīng)的服務(wù)器負載铺坞，并明智地采用緩存策略起宽。
如果你的項目的 SEO 和 首屏渲染是評價項目的關(guān)鍵指標，那么你的項目就需要服務(wù)端渲染來幫助你實現(xiàn)最佳的初始加載性能和 SEO济榨，具體的 Vue SSR 如何實現(xiàn)坯沪，可以參考作者的另一篇文章《Vue SSR 踩坑之旅》。如果你的 Vue 項目只需改善少數(shù)營銷頁面（例如/擒滑， /about腐晾，?/contact?等）的 SEO，那么你可能需要預(yù)渲染丐一，在構(gòu)建時 (build time) 簡單地生成針對特定路由的靜態(tài) HTML 文件藻糖。優(yōu)點是設(shè)置預(yù)渲染更簡單，并可以將你的前端作為一個完全靜態(tài)的站點库车，具體你可以使用 prerender-spa-plugin 就可以輕松地添加預(yù)渲染 巨柒。
二、Webpack 層面的優(yōu)化
2.1柠衍、Webpack 對圖片進行壓縮
在 vue 項目中除了可以在?webpack.base.conf.js?中 url-loader 中設(shè)置 limit 大小來對圖片處理洋满，對小于 limit 的圖片轉(zhuǎn)化為 base64 格式，其余的不做操作珍坊。所以對有些較大的圖片資源牺勾，在請求資源的時候，加載會很慢阵漏，我們可以用?image-webpack-loader來壓縮圖片
2.2驻民、減少 ES6 轉(zhuǎn)為 ES5 的冗余代碼
在默認情況下， Babel 會在每個輸出文件中內(nèi)嵌這些依賴的輔助函數(shù)代碼履怯，如果多個源代碼文件都依賴這些輔助函數(shù)回还，那么這些輔助函數(shù)的代碼將會出現(xiàn)很多次，造成代碼冗余虑乖。為了不讓這些輔助函數(shù)的代碼重復(fù)出現(xiàn)懦趋，可以在依賴它們時通過?require('babel-runtime/helpers/createClass')?的方式導(dǎo)入，這樣就能做到只讓它們出現(xiàn)一次疹味。babel-plugin-transform-runtime?插件就是用來實現(xiàn)這個作用的仅叫，將相關(guān)輔助函數(shù)進行替換成導(dǎo)入語句帜篇，從而減小 babel 編譯出來的代碼的文件大小。
2.3诫咱、提取公共代碼
如果項目中沒有去將每個頁面的第三方庫和公共模塊提取出來笙隙，則項目會存在以下問題：
相同的資源被重復(fù)加載，浪費用戶的流量和服務(wù)器的成本坎缭。
每個頁面需要加載的資源太大竟痰，導(dǎo)致網(wǎng)頁首屏加載緩慢，影響用戶體驗掏呼。
所以我們需要將多個頁面的公共代碼抽離成單獨的文件坏快，來優(yōu)化以上問題 。Webpack 內(nèi)置了專門用于提取多個Chunk 中的公共部分的插件 CommonsChunkPlugin憎夷，我們在項目中 CommonsChunkPlugin 的配置如下
2.4莽鸿、模板預(yù)編譯
當(dāng)使用 DOM 內(nèi)模板或 JavaScript 內(nèi)的字符串模板時，模板會在運行時被編譯為渲染函數(shù)拾给。通常情況下這個過程已經(jīng)足夠快了祥得，但對性能敏感的應(yīng)用還是最好避免這種用法。
預(yù)編譯模板最簡單的方式就是使用單文件組件——相關(guān)的構(gòu)建設(shè)置會自動把預(yù)編譯處理好蒋得，所以構(gòu)建好的代碼已經(jīng)包含了編譯出來的渲染函數(shù)而不是原始的模板字符串级及。
如果你使用 webpack，并且喜歡分離 JavaScript 和模板文件额衙，你可以使用 vue-template-loader饮焦，它也可以在構(gòu)建過程中把模板文件轉(zhuǎn)換成為 JavaScript 渲染函數(shù)。
2.5入偷、提取組件的 CSS
當(dāng)使用單文件組件時追驴，組件內(nèi)的 CSS 會以 style 標簽的方式通過 JavaScript 動態(tài)注入械哟。這有一些小小的運行時開銷疏之，如果你使用服務(wù)端渲染，這會導(dǎo)致一段 “無樣式內(nèi)容閃爍 (fouc) ” 暇咆。將所有組件的 CSS 提取到同一個文件可以避免這個問題锋爪，也會讓 CSS 更好地進行壓縮和緩存。
2.6爸业、優(yōu)化 SourceMap
我們在項目進行打包后其骄，會將開發(fā)中的多個文件代碼打包到一個文件中，并且經(jīng)過壓縮扯旷、去掉多余的空格拯爽、babel編譯化后，最終將編譯得到的代碼會用于線上環(huán)境钧忽，那么這樣處理后的代碼和源代碼會有很大的差別毯炮，當(dāng)有 bug的時候逼肯，我們只能定位到壓縮處理后的代碼位置，無法定位到開發(fā)環(huán)境中的代碼桃煎，對于開發(fā)來說不好調(diào)式定位問題篮幢，因此 sourceMap 出現(xiàn)了，它就是為了解決不好調(diào)式代碼問題的为迈。
cheap：源代碼中的列信息是沒有任何作用三椿，因此我們打包后的文件不希望包含列相關(guān)信息，只有行信息能建立打包前后的依賴關(guān)系葫辐。因此不管是開發(fā)環(huán)境或生產(chǎn)環(huán)境搜锰，我們都希望添加 cheap 的基本類型來忽略打包前后的列信息；
module：不管是開發(fā)環(huán)境還是正式環(huán)境耿战，我們都希望能定位到bug的源代碼具體的位置纽乱，比如說某個 Vue 文件報錯了，我們希望能定位到具體的 Vue 文件昆箕，因此我們也需要 module 配置鸦列；
soure-map：source-map 會為每一個打包后的模塊生成獨立的 soucemap 文件 ，因此我們需要增加source-map 屬性鹏倘；
eval-source-map：eval 打包代碼的速度非呈磬停快，因為它不生成 map 文件纤泵，但是可以對 eval 組合使用 eval-source-map 使用會將 map 文件以 DataURL 的形式存在打包后的 js 文件中骆姐。在正式環(huán)境中不要使用 eval-source-map, 因為它會增加文件的大小，但是在開發(fā)環(huán)境中捏题，可以試用下玻褪，因為他們打包的速度很快。
2.7公荧、構(gòu)建結(jié)果輸出分析
Webpack 輸出的代碼可讀性非常差而且文件非常大带射，讓我們非常頭疼。為了更簡單循狰、直觀地分析輸出結(jié)果窟社，社區(qū)中出現(xiàn)了許多可視化分析工具。這些工具以圖形的方式將結(jié)果更直觀地展示出來绪钥，讓我們快速了解問題所在灿里。接下來講解我們在 Vue 項目中用到的分析工具：webpack-bundle-analyzer
2.8、Vue 項目的編譯優(yōu)化
如果你的 Vue 項目使用 Webpack 編譯程腹，需要你喝一杯咖啡的時間匣吊，那么也許你需要對項目的 Webpack 配置進行優(yōu)化，提高 Webpack 的構(gòu)建效率
三、基礎(chǔ)的 Web 技術(shù)優(yōu)化
3.1色鸳、開啟 gzip 壓縮
gzip 是 GNUzip 的縮寫侣灶，最早用于 UNIX 系統(tǒng)的文件壓縮。HTTP 協(xié)議上的 gzip 編碼是一種用來改進 web 應(yīng)用程序性能的技術(shù)缕碎，web 服務(wù)器和客戶端（瀏覽器）必須共同支持 gzip褥影。目前主流的瀏覽器，Chrome咏雌，firefox凡怎，IE等都支持該協(xié)議。常見的服務(wù)器如 Apache赊抖，Nginx统倒，IIS 同樣支持，gzip 壓縮效率非常高氛雪，通撤看遥可以達到 70% 的壓縮率，也就是說报亩，如果你的網(wǎng)頁有 30K浴鸿，壓縮之后就變成了 9K 左右
3.2、瀏覽器緩存
為了提高用戶加載頁面的速度弦追，對靜態(tài)資源進行緩存是非常必要的岳链，根據(jù)是否需要重新向服務(wù)器發(fā)起請求來分類，將 HTTP 緩存規(guī)則分為兩大類（強制緩存劲件，對比緩存）掸哑，如果對緩存機制還不是了解很清楚的，可以參考作者寫的關(guān)于 HTTP 緩存的文章《深入理解HTTP緩存機制及原理》零远，這里不再贅述苗分。
3.3、CDN 的使用
瀏覽器從服務(wù)器上下載 CSS牵辣、js 和圖片等文件時都要和服務(wù)器連接摔癣，而大部分服務(wù)器的帶寬有限，如果超過限制服猪，網(wǎng)頁就半天反應(yīng)不過來供填。而 CDN 可以通過不同的域名來加載文件拐云，從而使下載文件的并發(fā)連接數(shù)大大增加罢猪，且CDN 具有更好的可用性，更低的網(wǎng)絡(luò)延遲和丟包率 叉瘩。
3.4膳帕、使用 Chrome Performance 查找性能瓶頸
Chrome 的 Performance 面板可以錄制一段時間內(nèi)的 js 執(zhí)行細節(jié)及時間。使用 Chrome 開發(fā)者工具分析頁面性能的步驟如下。
打開 Chrome 開發(fā)者工具危彩，切換到 Performance 面板
點擊 Record 開始錄制
刷新頁面或展開某個節(jié)點
點擊 Stop 停止錄制
參考鏈接：https://mp.weixin.qq.com/s/61zed8VrcGCUjazTOeDiZw
