前端vue性能優化

2021 年 4 月 1 日
筆記
vue程式碼優化, vue優化方案, WEB, webpack優化方案, web技術層面優化, 前端優化

一：程式碼層次優化

1.1、v-if 和 v-show 區分使用場景

v-if 是真正的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建；也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。

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

所以，v-if 適用於在運行時很少改變條件，不需要頻繁切換條件的場景；v-show 則適用於需要非常頻繁切換條件的場景。

1.2、computed 和 watch 區分使用場景

computed： 是計算屬性，依賴其它屬性值，並且 computed 的值有快取，只有它依賴的屬性值發生改變，下一次獲取 computed 的值時才會重新計算 computed 的值；

watch： 更多的是「觀察」的作用，類似於某些數據的監聽回調，每當監聽的數據變化時都會執行回調進行後續操作；

運用場景：

當我們需要進行數值計算，並且依賴於其它數據時，應該使用 computed，因為可以利用 computed 的快取特性，避免每次獲取值時，都要重新計算；
當我們需要在數據變化時執行非同步或開銷較大的操作時，應該使用 watch，使用 watch 選項允許我們執行非同步操作 ( 訪問一個 API )，限制我們執行該操作的頻率，並在我們得到最終結果前，設置中間狀態。這些都是計算屬性無法做到的。

1.3、v-for 遍歷必須為 item 添加 key，且避免同時使用 v-if

（1）v-for 遍歷必須為 item 添加 key

在列表數據進行遍歷渲染時，需要為每一項 item 設置唯一 key 值，方便 Vue.js 內部機制精準找到該條列表數據。當 state 更新時，新的狀態值和舊的狀態值對比，較快地定位到 diff 。

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

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

1.4、長列表性能優化

Vue 會通過 Object.defineProperty 對數據進行劫持，來實現視圖響應數據的變化，然而有些時候我們的組件就是純粹的數據展示，不會有任何改變，我們就不需要 Vue 來劫持我們的數據，在大量數據展示的情況下，這能夠很明顯的減少組件初始化的時間，那如何禁止 Vue 劫持我們的數據呢？可以通過 Object.freeze 方法來凍結一個對象，一旦被凍結的對象就再也不能被修改了。

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  }
};

1.5、事件的銷毀

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

created() {
  addEventListener('click', this.click, false)
},
beforeDestroy() {
  removeEventListener('click', this.click, false)
}
複製程式碼

1.6、圖片資源懶載入

對於圖片過多的頁面，為了加速頁面載入速度，所以很多時候我們需要將頁面內未出現在可視區域內的圖片先不做載入，等到滾動到可視區域後再去載入。這樣對於頁面載入性能上會有很大的提升，也提高了用戶體驗。我們在項目中使用 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 插件的簡單使用，如果要看插件的更多參數選項，可以查看 vue-lazyload 的 github 地址。

1.7、路由懶載入

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

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

我們在項目中經常會需要引入第三方插件，如果我們直接引入整個插件，會導致項目的體積太大，我們可以藉助 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)
複製程式碼

1.9、優化無限列表性能

如果你的應用存在非常長或者無限滾動的列表，那麼需要採用窗口化的技術來優化性能，只需要渲染少部分區域的內容，減少重新渲染組件和創建 dom 節點的時間。你可以參考以下開源項目 vue-virtual-scroll-list 和 vue-virtual-scroller 來優化這種無限列表的場景的。

1.10、服務端渲染 SSR or 預渲染

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

（1）服務端渲染的優點：

更好的 SEO：因為 SPA 頁面的內容是通過 Ajax 獲取，而搜索引擎爬取工具並不會等待 Ajax 非同步完成後再抓取頁面內容，所以在 SPA 中是抓取不到頁面通過 Ajax 獲取到的內容；而 SSR 是直接由服務端返回已經渲染好的頁面（數據已經包含在頁面中），所以搜索引擎爬取工具可以抓取渲染好的頁面；
更快的內容到達時間（首屏載入更快）：SPA 會等待所有 Vue 編譯後的 js 文件都下載完成後，才開始進行頁面的渲染，文件下載等需要一定的時間等，所以首屏渲染需要一定的時間；SSR 直接由服務端渲染好頁面直接返回顯示，無需等待下載 js 文件及再去渲染等，所以 SSR 有更快的內容到達時間；

（2）服務端渲染的缺點：

更多的開發條件限制：例如服務端渲染只支援 beforCreate 和 created 兩個鉤子函數，這會導致一些外部擴展庫需要特殊處理，才能在服務端渲染應用程式中運行；並且與可以部署在任何靜態文件伺服器上的完全靜態單頁面應用程式 SPA 不同，服務端渲染應用程式，需要處於 Node.js server 運行環境；
更多的伺服器負載：在 Node.js 中渲染完整的應用程式，顯然會比僅僅提供靜態文件的 server 更加大量佔用CPU 資源，因此如果你預料在高流量環境下使用，請準備相應的伺服器負載，並明智地採用快取策略。

如果你的項目的 SEO 和首屏渲染是評價項目的關鍵指標，那麼你的項目就需要服務端渲染來幫助你實現最佳的初始載入性能和 SEO，具體的 Vue SSR 如何實現，可以參考作者的另一篇文章《Vue SSR 踩坑之旅》。如果你的 Vue 項目只需改善少數營銷頁面（例如 /， /about， /contact 等）的 SEO，那麼你可能需要預渲染，在構建時 (build time) 簡單地生成針對特定路由的靜態 HTML 文件。優點是設置預渲染更簡單，並可以將你的前端作為一個完全靜態的站點，具體你可以使用 prerender-spa-plugin 就可以輕鬆地添加預渲染。

二、Webpack 層面的優化

2.1、Webpack 對圖片進行壓縮

在 vue 項目中除了可以在 webpack.base.conf.js 中 url-loader 中設置 limit 大小來對圖片處理，對小於 limit 的圖片轉化為 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.2、減少 ES6 轉為 ES5 的冗餘程式碼

Babel 插件會在將 ES6 程式碼轉換成 ES5 程式碼時會注入一些輔助函數，例如下面的 ES6 程式碼：

class HelloWebpack extends Component{...}

這段程式碼再被轉換成能正常運行的 ES5 程式碼時需要以下兩個輔助函數：

babel-runtime/helpers/createClass  // 用於實現 class 語法
babel-runtime/helpers/inherits  // 用於實現 extends 語法

在默認情況下， Babel 會在每個輸出文件中內嵌這些依賴的輔助函數程式碼，如果多個源程式碼文件都依賴這些輔助函數，那麼這些輔助函數的程式碼將會出現很多次，造成程式碼冗餘。為了不讓這些輔助函數的程式碼重複出現，可以在依賴它們時通過 require('babel-runtime/helpers/createClass') 的方式導入，這樣就能做到只讓它們出現一次。babel-plugin-transform-runtime 插件就是用來實現這個作用的，將相關輔助函數進行替換成導入語句，從而減小 babel 編譯出來的程式碼的文件大小。

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

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

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

"plugins": [
    "transform-runtime"
]

2.3、提取公共程式碼

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

相同的資源被重複載入，浪費用戶的流量和伺服器的成本。
每個頁面需要載入的資源太大，導致網頁首屏載入緩慢，影響用戶體驗。

所以我們需要將多個頁面的公共程式碼抽離成單獨的文件，來優化以上問題。Webpack 內置了專門用於提取多個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
    );
  }
}),
// 抽取出程式碼模組的映射關係
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  chunks: ['vendor']
})

2.4、模板預編譯

當使用 DOM 內模板或 JavaScript 內的字元串模板時，模板會在運行時被編譯為渲染函數。通常情況下這個過程已經足夠快了，但對性能敏感的應用還是最好避免這種用法。

預編譯模板最簡單的方式就是使用單文件組件——相關的構建設置會自動把預編譯處理好，所以構建好的程式碼已經包含了編譯出來的渲染函數而不是原始的模板字元串。

如果你使用 webpack，並且喜歡分離 JavaScript 和模板文件，你可以使用 vue-template-loader，它也可以在構建過程中把模板文件轉換成為 JavaScript 渲染函數。

2.5、提取組件的 CSS

當使用單文件組件時，組件內的 CSS 會以 style 標籤的方式通過 JavaScript 動態注入。這有一些小小的運行時開銷，如果你使用服務端渲染，這會導致一段「無樣式內容閃爍 (fouc) 」。將所有組件的 CSS 提取到同一個文件可以避免這個問題，也會讓 CSS 更好地進行壓縮和快取。

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

2.6、優化 SourceMap

我們在項目進行打包後，會將開發中的多個文件程式碼打包到一個文件中，並且經過壓縮、去掉多餘的空格、babel編譯化後，最終將編譯得到的程式碼會用於線上環境，那麼這樣處理後的程式碼和源程式碼會有很大的差別，當有 bug的時候，我們只能定位到壓縮處理後的程式碼位置，無法定位到開發環境中的程式碼，對於開發來說不好調式定位問題，因此 sourceMap 出現了，它就是為了解決不好調式程式碼問題的。

開發環境推薦：cheap-module-eval-source-map

生產環境推薦：cheap-module-source-map

原因如下：

cheap：源程式碼中的列資訊是沒有任何作用，因此我們打包後的文件不希望包含列相關資訊，只有行資訊能建立打包前後的依賴關係。因此不管是開發環境或生產環境，我們都希望添加 cheap 的基本類型來忽略打包前後的列資訊；
module ：不管是開發環境還是正式環境，我們都希望能定位到bug的源程式碼具體的位置，比如說某個 Vue 文件報錯了，我們希望能定位到具體的 Vue 文件，因此我們也需要 module 配置；
soure-map ：source-map 會為每一個打包後的模組生成獨立的 soucemap 文件，因此我們需要增加source-map 屬性；
eval-source-map：eval 打包程式碼的速度非常快，因為它不生成 map 文件，但是可以對 eval 組合使用 eval-source-map 使用會將 map 文件以 DataURL 的形式存在打包後的 js 文件中。在正式環境中不要使用 eval-source-map, 因為它會增加文件的大小，但是在開發環境中，可以試用下，因為他們打包的速度很快。

2.7、構建結果輸出分析

Webpack 輸出的程式碼可讀性非常差而且文件非常大，讓我們非常頭疼。為了更簡單、直觀地分析輸出結果，社區中出現了許多可視化分析工具。這些工具以圖形的方式將結果更直觀地展示出來，讓我們快速了解問題所在。接下來講解我們在 Vue 項目中用到的分析工具：webpack-bundle-analyzer 。

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

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

執行 $ npm run build \--report 後生成分析報告

三、基礎的 Web 技術優化

3.1、開啟 gzip 壓縮

gzip 是 GNUzip 的縮寫，最早用於 UNIX 系統的文件壓縮。HTTP 協議上的 gzip 編碼是一種用來改進 web 應用程式性能的技術，web 伺服器和客戶端（瀏覽器）必須共同支援 gzip。目前主流的瀏覽器，Chrome，firefox，IE等都支援該協議。常見的伺服器如 Apache，Nginx，IIS 同樣支援，gzip 壓縮效率非常高，通常可以達到 70% 的壓縮率，也就是說，如果你的網頁有 30K，壓縮之後就變成了 9K 左右

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

安裝：

npm install compression --save

添加程式碼邏輯：

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

重啟服務，觀察網路面板裡面的 response header 中的 Content-Encoding:gzip 表明gzip開啟成功

3.2、瀏覽器快取

為了提高用戶載入頁面的速度，對靜態資源進行快取是非常必要的，根據是否需要重新向伺服器發起請求來分類，將 HTTP 快取規則分為兩大類（強制快取，對比快取），如果對快取機制還不是了解很清楚的，可以參考作者寫的關於 HTTP 快取的文章《深入理解HTTP快取機制及原理》，這裡不再贅述。

3.3、CDN 的使用

瀏覽器從伺服器上下載 CSS、js 和圖片等文件時都要和伺服器連接，而大部分伺服器的頻寬有限，如果超過限制，網頁就半天反應不過來。而 CDN 可以通過不同的域名來載入文件，從而使下載文件的並發連接數大大增加，且CDN 具有更好的可用性，更低的網路延遲和丟包率。

3.4、使用 Chrome Performance 查找性能瓶頸

Chrome 的 Performance 面板可以錄製一段時間內的 js 執行細節及時間。使用 Chrome 開發者工具分析頁面性能的步驟如下。

打開 Chrome 開發者工具，切換到 Performance 面板
點擊 Record 開始錄製
刷新頁面或展開某個節點
點擊 Stop 停止錄製

想了解更多可移步另一篇《前端性能監控》查看

Tags: vue程式碼優化 vue優化方案 WEB webpack優化方案 web技術層面優化前端優化