前言

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)容分為以下三部分組成：

• Vue 代碼層面的優(yōu)化竖哩；
• webpack 配置層面的優(yōu)化；
• 基礎(chǔ)的 Web 技術(shù)層面的優(yōu)化脊僚。

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

1. v-if 和 v-show 區(qū)分使用場景

1. 本質(zhì)：

   • v-if：真正的條件渲染，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當?shù)乇讳N毀和重建辽幌；也是惰性的：如果在初始渲染時條件為假增淹，則什么也不做——直到條件第一次變?yōu)檎鏁r，才會開始渲染條件塊乌企。
   • v-show：簡單得多虑润， 不管初始條件是什么，元素總是會被渲染加酵，并且只是簡單地基于 CSS 的 display 屬性進行切換拳喻。

2. 適用場景：

   • v-if： 適用于在運行時很少改變條件，不需要頻繁切換條件的場景猪腕；
   • v-show：適用于需要非常頻繁切換條件的場景冗澈。

2. computed 和 watch 區(qū)分使用場景

1. 本質(zhì)

   • computed： 是計算屬性，依賴其它屬性值陋葡，并且 computed 的值有緩存亚亲，只有它依賴的屬性值發(fā)生改變，下一次獲取 computed 的值時才會重新計算 computed 的值腐缤；
   • watch：更多的是「觀察」的作用捌归，類似于某些數(shù)據(jù)的監(jiān)聽回調(diào) ，每當監(jiān)聽的數(shù)據(jù)變化時都會執(zhí)行回調(diào)進行后續(xù)操作岭粤；

2. 運用場景：

   • computed：當我們需要進行數(shù)值計算陨溅，并且依賴于其它數(shù)據(jù)時使用 computed，因為可以利用 computed 的緩存特性绍在，避免每次獲取值時门扇，都要重新計算；
   • watch：當我們需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時偿渡，應(yīng)該使用 watch臼寄，使用 watch 選項允許我們執(zhí)行異步操作 ( 訪問一個 API )，限制我們執(zhí)行該操作的頻率溜宽，并在我們得到最終結(jié)果前吉拳，設(shè)置中間狀態(tài)。這些都是計算屬性無法做到的适揉。

3. v-for 遍歷必須為 item 添加 key留攒，且避免同時使用 v-if

• v-for 遍歷必須為 item 添加 key

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

• v-for 遍歷避免同時使用 v-if

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

/* 推薦 */
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id">
    {{ user.name }}
  </li>
</ul>
computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
        return user.isActive
    })
  }
}

/* 不推薦 */
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id">
    {{ user.name }}
  </li>
</ul>

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);
  }
};

Tips：這里只是凍結(jié)了 users的值，引用不會被凍結(jié)仇味，當我們需要 reactive 數(shù)據(jù)的時候呻顽，我們可以重新給 users 賦值。

export default {
  data: () => ({
    users: {}
  }),
  async created() {
      const users = await axios.get("/api/users");
      this.users = Object.freeze(users);
  },
  methods:{
    // 改變值不會觸發(fā)視圖響應(yīng)  
    this.data.users[0] = newValue

    // 改變引用依然會觸發(fā)視圖響應(yīng)
    this.data.users = newArray
  }
};

5. 事件的銷毀

Vue 組件銷毀時丹墨，會自動清理它與其它實例的連接廊遍，解綁它的全部指令及事件監(jiān)聽器，但是僅限于組件本身的事件贩挣。如果在 js 內(nèi)

created() {
  addEventListener('click', this.click, false)
},
beforeDestroy() {
  removeEventListener('click', this.click, false)
}

6. 圖片資源懶加載

對于圖片過多的頁面喉前，為了加速頁面加載速度，所以很多時候我們需要將頁面內(nèi)未出現(xiàn)在可視區(qū)域內(nèi)的圖片先不做加載王财， 等到滾動到可視區(qū)域后再去加載卵迂。這樣對于頁面加載性能上會有很大的提升，也提高了用戶體驗绒净。

• 實現(xiàn)方式：使用 Vue 的 vue-lazyload 插件

  1. 安裝插件 :

  npm install vue-lazyload --save-dev
  

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

  import VueLazyload from 'vue-lazyload'
  

  然后再 vue 中直接使用

  Vue.use(VueLazyload)
  

  或者添加自定義選項

  Vue.use(VueLazyload, {
     preLoad: 1.3,
     error: 'dist/error.png',
     loading: 'dist/loading.gif',
     attempt: 1
  })
  

  3. 在 vue 文件中將 img 標簽的 src 屬性直接改為 v-lazy 见咒，從而將圖片顯示方式更改為懶加載顯示：

  <img v-lazy="/static/img/1.png">
  

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

7. 路由懶加載

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

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

8. 第三方插件的按需引入

我們在項目中經(jīng)常會需要引入第三方插件腾仅，如果我們直接引入整個插件乒裆，會導致項目的體積太大，我們可以借助 babel-plugin-component 推励，然后可以只引入需要的組件鹤耍，以達到減小項目體積的目的。

• 以下為項目中引入 element-ui 組件庫為例：

  1. 首先验辞，安裝 babel-plugin-component ：

     npm install babel-plugin-component -D
     

  2. 然后稿黄，將 .babelrc 修改為：

     {
       "presets": [["es2015", { "modules": false }]],
       "plugins": [
         [
           "component",
           {
             "libraryName": "element-ui",
             "styleLibraryName": "theme-chalk"
           }
         ]
       ]
     }
     

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

     import Vue from 'vue';
     import { Button, Select } from 'element-ui';
     
     Vue.use(Button)
     Vue.use(Select)
     

9. 優(yōu)化無限列表性能

如果你的應(yīng)用存在非常長或者無限滾動的列表，那么需要采用 窗口化 的技術(shù)來優(yōu)化性能跌造，只需要渲染少部分區(qū)域的內(nèi)容杆怕，減少重新渲染組件和創(chuàng)建 dom 節(jié)點的時間。你可以參考以下開源項目 vue-virtual-scroll-list 和 vue-virtual-scroller 來優(yōu)化這種無限列表的場景的壳贪。

10. 服務(wù)端渲染 SSR or 預渲染

服務(wù)端渲染是指 Vue 在客戶端將標簽渲染成的整個 html 片段的工作在服務(wù)端完成陵珍，服務(wù)端形成的 html 片段直接返回給客戶端這個過程就叫做服務(wù)端渲染。

• 服務(wù)端渲染的優(yōu)點：

  1. 更好的 SEO：因為 SPA 頁面的內(nèi)容是通過 Ajax 獲取违施，而搜索引擎爬取工具并不會等待 Ajax 異步完成后再抓取頁面內(nèi)容互纯，所以在 SPA 中是抓取不到頁面通過 Ajax 獲取到的內(nèi)容；而 SSR 是直接由服務(wù)端返回已經(jīng)渲染好的頁面（數(shù)據(jù)已經(jīng)包含在頁面中）磕蒲，所以搜索引擎爬取工具可以抓取渲染好的頁面留潦；
  2. 更快的內(nèi)容到達時間（首屏加載更快）：SPA 會等待所有 Vue 編譯后的 js 文件都下載完成后，才開始進行頁面的渲染辣往，文件下載等需要一定的時間等兔院，所以首屏渲染需要一定的時間；SSR 直接由服務(wù)端渲染好頁面直接返回顯示排吴，無需等待下載 js 文件及再去渲染等秆乳，所以 SSR 有更快的內(nèi)容到達時間；

• 服務(wù)端渲染的缺點：

  1. 更多的開發(fā)條件限制：例如服務(wù)端渲染只支持 beforCreate 和 created 兩個鉤子函數(shù)，這會導致一些外部擴展庫需要特殊處理屹堰，才能在服務(wù)端渲染應(yīng)用程序中運行肛冶；并且與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序 SPA 不同，服務(wù)端渲染應(yīng)用程序扯键，需要處于 Node.js server 運行環(huán)境睦袖；
  2. 更多的服務(wù)器負載：在 Node.js 中渲染完整的應(yīng)用程序，顯然會比僅僅提供靜態(tài)文件的 server 更加大量占用 CPU 資源荣刑，因此如果你預料在高流量環(huán)境下使用馅笙，請準備相應(yīng)的服務(wù)器負載，并明智地采用緩存策略厉亏。

• 適用場景：

  如果你的項目的 SEO 和 首屏渲染是評價項目的關(guān)鍵指標董习，那么你的項目就需要服務(wù)端渲染來幫助你實現(xiàn)最佳的初始加載性能和 SEO，具體的 Vue SSR 如何實現(xiàn)爱只，可以參考作者的另一篇文章《Vue SSR 踩坑之旅》皿淋。如果你的 Vue 項目只需改善少數(shù)營銷頁面（例如 /， /about恬试， /contact等）的 SEO窝趣，那么你可能需要預渲染，在構(gòu)建時 (build time) 簡單地生成針對特定路由的靜態(tài) HTML 文件训柴。優(yōu)點是設(shè)置預渲染更簡單哑舒，并可以將你的前端作為一個完全靜態(tài)的站點，具體你可以使用 prerender-spa-plugin 就可以輕松地添加預渲染 幻馁。

二洗鸵、Webpack 層面的優(yōu)化

1. Webpack 對圖片進行壓縮

在 vue 項目中除了可以在 webpack.base.conf.js 中 url-loader 中設(shè)置 limit 大小來對圖片處理，對小于 limit 的圖片轉(zhuǎn)化為 base64 格式宣赔，其余的不做操作预麸。所以對有些較大的圖片資源瞪浸，在請求資源的時候儒将，加載會很慢，我們可以用 image-webpack-loader來壓縮圖片：

1. 首先对蒲，安裝 image-webpack-loader ：

   npm install image-webpack-loader --save-dev
   

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

   {
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
     use:[
       {
       loader: 'url-loader',
       options: {
         limit: 10000,
         name: utils.assetsPath('img/[name].[hash:7].[ext]')
         }
       },
       {
         loader: 'image-webpack-loader',
         options: {
           bypassOnDebug: true,
         }
       }
     ]
   }
   

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

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

class HelloWebpack extends Component{...}

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

babel-runtime/helpers/createClass  // 用于實現(xiàn) class 語法
babel-runtime/helpers/inherits  // 用于實現(xiàn) extends 語法

1. 首先蹈矮，安裝 babel-plugin-transform-runtime ：

npm install babel-plugin-transform-runtime --save-dev

2. 然后砰逻，修改 .babelrc 配置文件為：

"plugins": [
    "transform-runtime"
]

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

3. 提取公共代碼

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

• 相同的資源被重復加載，浪費用戶的流量和服務(wù)器的成本。
• 每個頁面需要加載的資源太大刚操，導致網(wǎng)頁首屏加載緩慢闸翅，影響用戶體驗。

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

// 所有在 package.json 里面依賴的包鉴逞，都會被打包進 vendor.js 這個文件中记某。
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function(module, count) {
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    );
  }
}),
    
// 抽取出代碼模塊的映射關(guān)系
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  chunks: ['vendor']
})

如果要看插件的更多詳細內(nèi)容，可以查看 CommonsChunkPlugin 的 詳細介紹构捡。

4. 模板預編譯

當使用 DOM 內(nèi)模板或 JavaScript 內(nèi)的字符串模板時液南，模板會在運行時被編譯為渲染函數(shù)。通常情況下這個過程已經(jīng)足夠快了勾徽，但對性能敏感的應(yīng)用還是最好避免這種用法贺拣。

預編譯模板最簡單的方式就是使用單文件組件——相關(guān)的構(gòu)建設(shè)置會自動把預編譯處理好，所以構(gòu)建好的代碼已經(jīng)包含了編譯出來的渲染函數(shù)而不是原始的模板字符串捂蕴。

如果你使用 webpack譬涡，并且喜歡分離 JavaScript 和模板文件，你可以使用 vue-template-loader啥辨，它也可以在構(gòu)建過程中把模板文件轉(zhuǎn)換成為 JavaScript 渲染函數(shù)涡匀。

5. 提取組件的 CSS

當使用單文件組件時，組件內(nèi)的 CSS 會以 style 標簽的方式通過 JavaScript 動態(tài)注入溉知。這有一些小小的運行時開銷陨瘩，如果你使用服務(wù)端渲染，這會導致一段 “無樣式內(nèi)容閃爍 (fouc) ” 级乍。將所有組件的 CSS 提取到同一個文件可以避免這個問題舌劳，也會讓 CSS 更好地進行壓縮和緩存。

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

• webpack + vue-loader ( vue-cli 的 webpack 模板已經(jīng)預先配置好)
• Browserify + vueify
• Rollup + rollup-plugin-vue

6. 優(yōu)化 SourceMap

我們在項目進行打包后玫荣，會將開發(fā)中的多個文件代碼打包到一個文件中甚淡，并且經(jīng)過壓縮、去掉多余的空格捅厂、babel編譯化后贯卦，最終將編譯得到的代碼會用于線上環(huán)境，那么這樣處理后的代碼和源代碼會有很大的差別焙贷，當有 bug的時候撵割，我們只能定位到壓縮處理后的代碼位置，無法定位到開發(fā)環(huán)境中的代碼辙芍，對于開發(fā)來說不好調(diào)式定位問題啡彬，因此 sourceMap 出現(xiàn)了羹与，它就是為了解決不好調(diào)式代碼問題的。

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

[圖片上傳失敗...(image-c82f79-1597216830301)]

• 開發(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)境中，可以試用下致盟，因為他們打包的速度很快碎税。

7. 構(gòu)建結(jié)果輸出分析

Webpack 輸出的代碼可讀性非常差而且文件非常大，讓我們非常頭疼馏锡。為了更簡單雷蹂、直觀地分析輸出結(jié)果，社區(qū)中出現(xiàn)了許多可視化分析工具杯道。這些工具以圖形的方式將結(jié)果更直觀地展示出來匪煌，讓我們快速了解問題所在。接下來講解我們在 Vue 項目中用到的分析工具：webpack-bundle-analyzer 蕉饼。

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

if (config.build.bundleAnalyzerReport) {
  var BundleAnalyzerPlugin =   require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}

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

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)化

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)步驟如下：

• 安裝：

  npm install compression --save
  

• 添加代碼邏輯：

  var compression = require('compression');
  var app = express();app.use(compression());
  

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

2. 瀏覽器緩存

為了提高用戶加載頁面的速度，對靜態(tài)資源進行緩存是非常必要的蕉毯，根據(jù)是否需要重新向服務(wù)器發(fā)起請求來分類乓搬，將 HTTP 緩存規(guī)則分為兩大類（強制緩存，對比緩存）代虾，如果對緩存機制還不是了解很清楚的进肯，可以參考作者寫的關(guān)于 HTTP 緩存的文章《深入理解HTTP緩存機制及原理》。

3. CDN 的使用

瀏覽器從服務(wù)器上下載 CSS棉磨、js 和圖片等文件時都要和服務(wù)器連接江掩，而大部分服務(wù)器的帶寬有限，如果超過限制乘瓤，網(wǎng)頁就半天反應(yīng)不過來环形。而 CDN 可以通過不同的域名來加載文件，從而使下載文件的并發(fā)連接數(shù)大大增加衙傀，且CDN 具有更好的可用性抬吟，更低的網(wǎng)絡(luò)延遲和丟包率 。

4. 使用 Chrome Performance 查找性能瓶頸

Chrome 的 Performance 面板可以錄制一段時間內(nèi)的 js 執(zhí)行細節(jié)及時間统抬。使用 Chrome 開發(fā)者工具分析頁面性能的步驟如下火本。

1. 打開 Chrome 開發(fā)者工具危队，切換到 Performance 面板。
2. 點擊 Record 開始錄制钙畔。
3. 刷新頁面或展開某個節(jié)點茫陆。
4. 點擊 Stop 停止錄制。

轉(zhuǎn)載自 https://blog.csdn.net/qq_37939251/article/details/100031285 如有侵權(quán)請聯(lián)系擎析。