日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
面試官問Vue性能優(yōu)化，我該怎么回答

前言

Vue 框架通過數(shù)據(jù)雙向綁定和虛擬 DOM 技術(shù)，幫我們處理了前端開發(fā)中最臟最累的 DOM 操作部分， 我們不再需要去考慮如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 項目中仍然存在項目首屏優(yōu)化、Webpack 編譯配置優(yōu)化等問題，所以我們?nèi)匀恍枰リP(guān)注 Vue 項目性能方面的優(yōu)化，使項目具有更高效的性能、更好的用戶體驗。本文是作者通過實際項目的優(yōu)化實踐進行總結(jié)而來，希望讀者讀完本文，有一定的啟發(fā)思考，從而對自己的項目進行優(yōu)化起到幫助。本文內(nèi)容分為以下三部分組成：

為霞浦等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及霞浦網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、霞浦網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

  • Vue 代碼層面的優(yōu)化；

  • webpack 配置層面的優(yōu)化；

  • 基礎(chǔ)的 Web 技術(shù)層面的優(yōu)化。

一、代碼層面的優(yōu)化

1.1、v-if 和 v-show 區(qū)分使用場景

v-if   是   真正   的條件渲染，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建；也是 惰性的 ：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r，才會開始渲染條件塊。

v-show就簡單得多， 不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 的 display 屬性進行切換。

所以，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）v-for 遍歷必須為 item 添加 key

在列表數(shù)據(jù)進行遍歷渲染時，需要為每一項 item 設(shè)置唯一 key 值，方便 Vue.js 內(nèi)部機制精準(zhǔn)找到該條列表數(shù)據(jù)。當(dāng) state 更新時，新的狀態(tài)值和舊的狀態(tài)值對比，較快地定位到 diff 。

（2）v-for 遍歷避免同時使用 v-if

v-for 比 v-if 優(yōu)先級高，如果每一次都需要遍歷整個數(shù)組，將會影響速度，尤其是當(dāng)之需要渲染很小一部分的時候，必要情況下應(yīng)該替換成 computed 屬性。

推薦：

 
 
 
 
    
  
  
  
  
    1. 
  
  
  
  
    •   
  
  
  
  
    •     v-for="user in activeUsers"
      • 
  
  
  
  
    •     :key="user.id">
      • 
  
  
  
  
    •     {{ user.name }}
      • 
  
  
  
  
    •   
      • 
  
  
  
  
    2. 
  
  
  
  
  2. computed: {
    3. 
  
  
  
  
  3.   activeUsers: function () {
    4. 
  
  
  
  
  4.     return this.users.filter(function (user) {
    5. 
  
  
  
  
  5.  return user.isActive
    6. 
  
  
  
  
  6.     })
    7. 
  
  
  
  
  7.   }
    8. 
  
  
  
  
  8. }
    9. 
  
  
  
  
  9. 復(fù)制代碼
    10.

不推薦：

 
 
 
 
    
  
  
  
  
    1. 
  
  
  
  
    •   
  
  
  
  
    •     v-for="user in users"
      • 
  
  
  
  
    •     v-if="user.isActive"
      • 
  
  
  
  
    •     :key="user.id">
      • 
  
  
  
  
    •     {{ user.name }}
      • 
  
  
  
  
    •   
      • 
  
  
  
  
    2. 
  
  
  
  
  2. 復(fù)制代碼
    3.

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é)的對象就再也不能被修改了。

 
 
 
 
    
  
  
  
  
  1. export default {
    2. 
  
  
  
  
  2.   data: () => ({
    3. 
  
  
  
  
  3.     users: {}
    4. 
  
  
  
  
  4.   }),
    5. 
  
  
  
  
  5.   async created() {
    6. 
  
  
  
  
  6.     const users = await axios.get("/api/users");
    7. 
  
  
  
  
  7.     this.users = Object.freeze(users);
    8. 
  
  
  
  
  8.   }
    9. 
  
  
  
  
  9. };
    10. 
  
  
  
  
  10. 復(fù)制代碼
    11.

1.5、事件的銷毀

Vue 組件銷毀時，會自動清理它與其它實例的連接，解綁它的全部指令及事件監(jiān)聽器，但是僅限于組件本身的事件。如果在 js 內(nèi)使用 addEventListene 等方式是不會自動銷毀的，我們需要在組件銷毀時手動移除這些事件的監(jiān)聽，以免造成內(nèi)存泄露，如：

 
 
 
 
    
  
  
  
  
  1. created() {
    2. 
  
  
  
  
  2.   addEventListener('click', this.click, false)
    3. 
  
  
  
  
  3. },
    4. 
  
  
  
  
  4. beforeDestroy() {
    5. 
  
  
  
  
  5.   removeEventListener('click', this.click, false)
    6. 
  
  
  
  
  6. }
    7. 
  
  
  
  
  7. 復(fù)制代碼
    8.

1.6、圖片資源懶加載

對于圖片過多的頁面，為了加速頁面加載速度，所以很多時候我們需要將頁面內(nèi)未出現(xiàn)在可視區(qū)域內(nèi)的圖片先不做加載， 等到滾動到可視區(qū)域后再去加載。這樣對于頁面加載性能上會有很大的提升，也提高了用戶體驗。我們在項目中使用 Vue 的 vue-lazyload 插件：

（1）安裝插件

 
 
 
 
    
  
  
  
  
  1. npm install vue-lazyload --save-dev
    2. 
  
  
  
  
  2. 復(fù)制代碼
    3.

（2）在入口文件 man.js 中引入并使用

 
 
 
 
    
  
  
  
  
  1. import VueLazyload from 'vue-lazyload'
    2. 
  
  
  
  
  2. 復(fù)制代碼
    3.

然后再 vue 中直接使用

 
 
 
 
    
  
  
  
  
  1. Vue.use(VueLazyload)
    2. 
  
  
  
  
  2. 復(fù)制代碼
    3.

或者添加自定義選項

 
 
 
 
    
  
  
  
  
  1. Vue.use(VueLazyload, {
    2. 
  
  
  
  
  2. preLoad: 1.3,
    3. 
  
  
  
  
  3. error: 'dist/error.png',
    4. 
  
  
  
  
  4. loading: 'dist/loading.gif',
    5. 
  
  
  
  
  5. attempt: 1
    6. 
  
  
  
  
  6. })
    7. 
  
  
  
  
  7. 復(fù)制代碼
    8.

（3）在 vue 文件中將 img 標(biāo)簽的 src 屬性直接改為 v-lazy ，從而將圖片顯示方式更改為懶加載顯示：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 復(fù)制代碼
    3.

以上為 vue-lazyload 插件的簡單使用，如果要看插件的更多參數(shù)選項，可以查看 vue-lazyload 的 github 地址。

1.7、路由懶加載

Vue 是單頁面應(yīng)用，可能會有很多的路由引入 ，這樣使用 webpcak 打包后的文件很大，當(dāng)進入首頁時，加載的資源過多，頁面會出現(xiàn)白屏的情況，不利于用戶體驗。如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時候才加載對應(yīng)的組件，這樣就更加高效了。這樣會大大提高首屏顯示的速度，但是可能其他的頁面的速度就會降下來。

路由懶加載：

 
 
 
 
    
  
  
  
  
  1. const Foo = () => import('./Foo.vue')
    2. 
  
  
  
  
  2. const router = new VueRouter({
    3. 
  
  
  
  
  3.   routes: [
    4. 
  
  
  
  
  4.     { path: '/foo', component: Foo }
    5. 
  
  
  
  
  5.   ]
    6. 
  
  
  
  
  6. })
    7. 
  
  
  
  
  7. 復(fù)制代碼
    8.

1.8、第三方插件的按需引入

我們在項目中經(jīng)常會需要引入第三方插件，如果我們直接引入整個插件，會導(dǎo)致項目的體積太大，我們可以借助 babel-plugin-component   ，然后可以只引入需要的組件，以達到減小項目體積的目的。以下為項目中引入 element-ui 組件庫為例：

（1）首先，安裝 babel-plugin-component   ：

 
 
 
 
    
  
  
  
  
  1. npm install babel-plugin-component -D
    2. 
  
  
  
  
  2. 復(fù)制代碼
    3.

（2）然后，將 .babelrc 修改為：

 
 
 
 
    
  
  
  
  
  1. {
    2. 
  
  
  
  
  2.   "presets": [["es2015", { "modules": false }]],
    3. 
  
  
  
  
  3.   "plugins": [
    4. 
  
  
  
  
  4.     [
    5. 
  
  
  
  
  5.       "component",
    6. 
  
  
  
  
  6.       {
    7. 
  
  
  
  
  7.         "libraryName": "element-ui",
    8. 
  
  
  
  
  8.         "styleLibraryName": "theme-chalk"
    9. 
  
  
  
  
  9.       }
    10. 
  
  
  
  
  10.     ]
    11. 
  
  
  
  
  11.   ]
    12. 
  
  
  
  
  12. }
    13. 
  
  
  
  
  13. 復(fù)制代碼
    14.

（3）在 main.js 中引入部分組件：

 
 
 
 
    
  
  
  
  
  1. import Vue from 'vue';
    2. 
  
  
  
  
  2. import { Button, Select } from 'element-ui';
    3. 
  
  
  
  
  3. 
  
  
  
  
  4.  Vue.use(Button)
    5. 
  
  
  
  
  5.  Vue.use(Select)
    6. 
  
  
  
  
  6. 復(fù)制代碼
    7.

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 在客戶端將標(biāo)簽渲染成的整個 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)境下使用，請準(zhǔn)備相應(yīng)的服務(wù)器負載，并明智地采用緩存策略。

如果你的項目的 SEO 和 首屏渲染是評價項目的關(guān)鍵指標(biāo)，那么你的項目就需要服務(wù)端渲染來幫助你實現(xiàn)最佳的初始加載性能和 SEO，具體的 Vue SSR 如何實現(xiàn)，可以參考作者的另一篇文章《Vue SSR 踩坑之旅》。如果你的 Vue 項目只需改善少數(shù)營銷頁面（例如 /， /about， /contac t 等）的 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 來壓縮圖片：

（1）首先，安裝 image-webpack-loader ：

 
 
 
 
    
  
  
  
  
  1. npm install image-webpack-loader --save-dev
    2. 
  
  
  
  
  2. 復(fù)制代碼
    3.

（2）然后，在 webpack.base.conf.js 中進行配置：

 
 
 
 
    
  
  
  
  
  1. {
    2. 
  
  
  
  
  2.   test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    3. 
  
  
  
  
  3.   use:[
    4. 
  
  
  
  
  4.     {
    5. 
  
  
  
  
  5.     loader: 'url-loader',
    6. 
  
  
  
  
  6.     options: {
    7. 
  
  
  
  
  7.       limit: 10000,
    8. 
  
  
  
  
  8.       name: utils.assetsPath('img/[name].[hash:7].[ext]')
    9. 
  
  
  
  
  9.       }
    10. 
  
  
  
  
  10.     },
    11. 
  
  
  
  
  11.     {
    12. 
  
  
  
  
  12.       loader: 'image-webpack-loader',
    13. 
  
  
  
  
  13.       options: {
    14. 
  
  
  
  
  14.         bypassOnDebug: true,
    15. 
  
  
  
  
  15.       }
    16. 
  
  
  
  
  16.     }
    17. 
  
  
  
  
  17.   ]
    18. 
  
  
  
  
  18. }
    19. 
  
  
  
  
  19. 復(fù)制代碼
    20.

2.2、減少 ES6 轉(zhuǎn)為 ES5 的冗余代碼

Babel 插件會在將 ES6 代碼轉(zhuǎn)換成 ES5 代碼時會注入一些輔助函數(shù)，例如下面的 ES6 代碼：

 
 
 
 
    
  
  
  
  
  1. class HelloWebpack extends Component{...}
    2. 
  
  
  
  
  2. 復(fù)制代碼
    3.

這段代碼再被轉(zhuǎn)換成能正常運行的 ES5 代碼時需要以下兩個輔助函數(shù)：

 
 
 
 
    
  
  
  
  
  1. babel-runtime/helpers/createClass  // 用于實現(xiàn) class 語法
    2. 
  
  
  
  
  2. babel-runtime/helpers/inherits  // 用于實現(xiàn) extends 語法
    3. 
  
  
  
  
  3. 復(fù)制代碼
    4.

在默認情況下， 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 編譯出來的代碼的文件大小。

（1）首先，安裝 babel-plugin-transform-runtime   ：

 
 
 
 
    
  
  
  
  
  1. npm install babel-plugin-transform-runtime --save-dev
    2. 
  
  
  
  
  2. 復(fù)制代碼
    3.

（2）然后，修改 .babelrc 配置文件為：

 
 
 
 
    
  
  
  
  
  1. "plugins": [
    2. 
  
  
  
  
  2.     "transform-runtime"
    3. 
  
  
  
  
  3. ]
    4. 
  
  
  
  
  4. 復(fù)制代碼
    5.

如果要看插件的更多詳細內(nèi)容，可以查看babel-plugin-transform-runtime 的 詳細介紹。

2.3、提取公共代碼

如果項目中沒有去將每個頁面的第三方庫和公共模塊提取出來，則項目會存在以下問題：

  • 相同的資源被重復(fù)加載，浪費用戶的流量和服務(wù)器的成本。

  • 每個頁面需要加載的資源太大，導(dǎo)致網(wǎng)頁首屏加載緩慢，影響用戶體驗。

所以我們需要將多個頁面的公共代碼抽離成單獨的文件，來優(yōu)化以上問題 。Webpack 內(nèi)置了專門用于提取多個Chunk 中的公共部分的插件 CommonsChunkPlugin，我們在項目中 CommonsChunkPlugin 的配置如下：

 
 
 
 
    
  
  
  
  
  1. // 所有在 package.json 里面依賴的包，都會被打包進 vendor.js 這個文件中。
    2. 
  
  
  
  
  2. new webpack.optimize.CommonsChunkPlugin({
    3. 
  
  
  
  
  3.   name: 'vendor',
    4. 
  
  
  
  
  4.   minChunks: function(module, count) {
    5. 
  
  
  
  
  5.     return (
    6. 
  
  
  
  
  6.       module.resource &&
    7. 
  
  
  
  
  7.       /\.js$/.test(module.resource) &&
    8. 
  
  
  
  
  8.       module.resource.indexOf(
    9. 
  
  
  
  
  9.         path.join(__dirname, '../node_modules')
    10. 
  
  
  
  
  10.       ) === 0
    11. 
  
  
  
  
  11.     );
    12. 
  
  
  
  
  12.   }
    13. 
  
  
  
  
  13. }),
    14. 
  
  
  
  
  14. // 抽取出代碼模塊的映射關(guān)系
    15. 
  
  
  
  
  15. new webpack.optimize.CommonsChunkPlugin({
    16. 
  
  
  
  
  16.   name: 'manifest',
    17. 
  
  
  
  
  17.   chunks: ['vendor']
    18. 
  
  
  
  
  18. })
    19. 
  
  
  
  
  19. 復(fù)制代碼
    20.

如果要看插件的更多詳細內(nèi)容，可以查看 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 標(biāo)簽的方式通過 JavaScript 動態(tài)注入。這有一些小小的運行時開銷，如果你使用服務(wù)端渲染，這會導(dǎo)致一段 “無樣式內(nèi)容閃爍 (fouc) ” 。將所有組件的 CSS 提取到同一個文件可以避免這個問題，也會讓 CSS 更好地進行壓縮和緩存。

查閱這個構(gòu)建工具各自的文檔來了解更多：

  • webpack + vue-loader ( vue-cli 的 webpack 模板已經(jīng)預(yù)先配置好)

  • Browserify + vueify

  • Rollup + rollup-plugin-vue

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)式代碼問題的。

SourceMap 的可選值如下（+ 號越多，代表速度越快，- 號越多，代表速度越慢, o 代表中等速度 ）

開發(fā)環(huán)境推薦：cheap-module-eval-source-map

生產(chǎn)環(huán)境推薦：cheap-module-source-map

原因如下：

  • 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   。

我們在項目中 webpack.prod.conf.js   進行配置：

 
 
 
 
    
  
  
  
  
  1. if (config.build.bundleAnalyzerReport) {
    2. 
  
  
  
  
  2.   var BundleAnalyzerPlugin =   require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    3. 
  
  
  
  
  3.   webpackConfig.plugins.push(new BundleAnalyzerPlugin());
    4. 
  
  
  
  
  4. }
    5. 
  
  
  
  
  5. 復(fù)制代碼
    6.

執(zhí)行 $ npm run build \--report   后生成分析報告如下：

2.8、Vue 項目的編譯優(yōu)化

如果你的 Vue 項目使用 Webpack 編譯，需要你喝一杯咖啡的時間，那么也許你需要對項目的 Webpack 配置進行優(yōu)化，提高 Webpack 的構(gòu)建效率。具體如何進行 Vue 項目的 Webpack 構(gòu)建優(yōu)化，可以參考作者的另一篇文章《 Vue 項目 Webpack 優(yō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 左右

以下我們以服務(wù)端使用我們熟悉的 express 為例，開啟 gzip 非常簡單，相關(guān)步驟如下：

  • 安裝：

    •   
  
  
  
      
   
   
   
   
    1. npm install compression --save
      2. 
   
   
   
   
    2. 復(fù)制代碼
      3.

  • 添加代碼邏輯：

    •   
  
  
  
      
   
   
   
   
    1. var compression = require('compression');
      2. 
   
   
   
   
    2. var app = express();
      3. 
   
   
   
   
    3. app.use(compression())
      4. 
   
   
   
   
    4. 復(fù)制代碼
      5.

  • 重啟服務(wù)，觀察網(wǎng)絡(luò)面板里面的 response header，如果看到如下紅圈里的字段則表明 gzip 開啟成功 ：

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ā)者工具分析頁面性能的步驟如下。

  1. 打開 Chrome 開發(fā)者工具，切換到 Performance 面板

  2. 點擊 Record 開始錄制

  3. 刷新頁面或展開某個節(jié)點

  4. 點擊 Stop 停止錄制

更多關(guān)于 Performance 的內(nèi)容可以點擊這里查看。

總結(jié)

本文通過以下三部分組成：Vue 代碼層面的優(yōu)化、webpack 配置層面的優(yōu)化、基礎(chǔ)的 Web 技術(shù)層面的優(yōu)化；來介紹怎么去優(yōu)化 Vue 項目的性能。希望對讀完本文的你有幫助、有啟發(fā)，如果有不足之處，歡迎批評指正交流！


分享名稱：面試官問Vue性能優(yōu)化，我該怎么回答
瀏覽路徑：http://www.dlmjj.cn/article/cdgcepc.html