Vue.js應用性能優化一

雖然如今網絡環境和電子設備變得愈來愈好，可是保持應用程序快速加載變得愈來愈困難。在本系列中，我將深刻研究咱們在實踐中使用的Vue性能優化技術，而且您能夠在Vue.js應用程序中使用它們，使應用程序快速加載並順利執行。個人目標是讓這個系列成爲關於Vue應用程序性能的全面而完整的指南。

Webpack bundling 打包機制

本系列中的大多數技巧都將集中在如何使咱們的JS包更小。要了解它，首先咱們須要瞭解Webpack如何打包全部文件。

打包咱們的資源（assets）時，Webpack會建立一個依賴圖。它是一個基於導入連接全部文件的圖表。假設咱們在webpack配置中指定了一個名爲main.js的文件做爲入口點，它將成爲咱們依賴圖的根。如今，咱們將在此文件中導入的每一個js模塊將成爲圖中的節點，而且在這些節點中導入的每一個模塊都將成爲其節點。

Webpack使用此依賴關係圖來檢測它應該包含在輸出包中的文件。輸出包只是一個（或咱們將在後面的部分中看到的多個）javascript文件，其中包含依賴圖中的全部模塊。

這個bundle包本質上是咱們整個應用程序的JavaScript。

咱們能夠用下圖來講明這個過程：

如今咱們知道webpack是如何打包的，很明顯咱們的項目越大，初始JavaScript包就越大。

越大的初始bundle，下載和解析，咱們的用戶所需的時間就越長。用戶必須等待的時間越長，他離開咱們網站的可能性就越大。事實上，據搜索引擎統計，53％的移動用戶留下的頁面加載時間超過3秒。

總而言之，更大的bundle=更少的用戶，這能夠直接轉化爲潛在收入的損失。有關案例統計，延遲2秒致使每位訪客的收入損失4.3％。

延遲加載

那麼當咱們仍然須要添加新功能並改進咱們的應用程序時，咱們如何削減budle包大小？答案很簡單 - 延遲加載和代碼分割。

顧名思義，延遲加載是一個懶惰地加載應用程序的部分（塊）的過程。換句話說 - 只有在咱們真正須要它們時加載它們。代碼拆分只是將應用程序拆分爲多個延遲加載的代碼塊的一種處理方式。

在大多數狀況下，當用戶訪問您的網站時，您不須要當即使用Javascript包中的全部代碼。

例如，咱們不須要花費寶貴的資源來爲首次訪問咱們網站的訪客加載「個人頁面」區域。或者可能存在每一個頁面上不須要的模態，工具提示和其餘零件和組件。

當只須要幾個部分時，在每一個頁面加載時下載，解析和執行整個包的全部內容都是浪費。

延遲加載容許咱們拆分捆綁包並僅提供所需的部分，這樣用戶就不會浪費時間下載和解析不會使用的代碼。

要查看咱們網站中實際使用了多少JavaScript代碼，咱們能夠轉到devtools - > cmd(ctrl) + shift + p - >輸入coverage - >點擊Performance instrument coverage 。如今咱們應該可以看到實際使用了多少下載的代碼。

標記爲紅色的全部內容都是當前路由上不須要的東西，能夠延遲加載。若是您正在使用source maps，則能夠單擊此列表中的任何文件，並查看那些未調用部分。正如咱們所看到的，甚至vuejs.org還有很大的改進空間）。

經過延遲加載適當的組件和庫，咱們設法將Vue Storefront的捆綁大小減小了60％！這多是得到性能提高的最簡單方法。

如今咱們知道延遲加載是什麼，它很是有用。如今是時候看看咱們如何在咱們本身的Vue.js應用程序中使用延遲加載。

動態導入

咱們可使用webpack的動態導入，輕鬆地加載咱們應用程序的某些部分。讓咱們看看它們的工做原理，以及它們與常規導出模塊的區別。

若是咱們以這樣的標準方式導入JavaScript模塊：

它將做爲main.js的節點添加到依賴關係圖中並與之捆綁在一塊兒。

可是，若是咱們僅在某些狀況下須要咱們的Cat模塊，例如對用戶交互的響應，該怎麼辦？將此模塊與咱們的初始bundle包捆綁在一塊兒是一個壞主意，由於它不是一直須要的。咱們須要一種方法告訴咱們的應用程序何時應該下載這段代碼。

這是動態導入能夠幫助咱們的地方！如今看一下這個例子：

咱們來看看這裏發生的事情：

咱們建立了一個返回import()函數的函數，而不是直接導入Cat模塊。如今，webpack會將動態導入的模塊的內容捆綁到一個單獨的文件中。表示動態導入模塊的函數返回一個Promise，它將使咱們在Promise resolve後，能夠訪問導出的模塊成員。

而後，咱們能夠在須要時下載此可選塊。例如，做爲對某個用戶交互的響應（如路由更改或單擊）。

經過動態導入，咱們基本上將給定節點（在這種狀況下爲Cat）隔離，當咱們決定須要時，它將被添加到依賴圖並下載此部分（這意味着咱們也砍掉了一些Cat.js 中導入的模塊）。

讓咱們看另外一個更好地說明這種機制的例子。

假設咱們有一個很是小的網上商店，有4個文件：

main.js 做爲咱們的主要bundle包
product.js 用於產品頁面中的腳本
productGallery.js 用於產品頁面中的產品庫
category.js 用於類別頁面中的腳本

在上面的代碼中，根據當前路由，咱們動態導入產品或類別模塊，而後運行由它們二者導出的init函數。

瞭解動態導入的工做方式以後，咱們知道產品和類別最終會以單獨的bundle包形式出現，可是未動態導入的productGallery模塊會發生什麼？正如咱們所知，經過動態導入模塊，咱們削減了依賴圖中的一部分。此部件中導入的全部內容都將捆綁在一塊兒，所以productGallery將與產品模塊位於同一個bundle包中。

換句話說，咱們只是爲依賴圖建立某種新的入口點。

延遲加載Vue components

如今咱們知道延遲加載是什麼，以及爲何須要它。如今是時候看看咱們如何在Vue應用程序中使用它了。

好消息是它很是簡單，咱們能夠懶加載整個vue單一文件組件(SFC)，vue文件語法和HTML, CSS同樣。不熟悉的話，去看看官方文檔。

如今只有在請求時纔會下載組件。如下是調用Vue組件動態加載的最經常使用方法：

• 調用包含導入的函數

• 渲染組件

請注意，僅當請求的組件在模板中渲染時，纔會調用lazyComponent函數。例如這段代碼：

在DOM中須要渲染組件以前，組件將不會加載。想要加載，只要v-if值更改成true便可。

總結

延遲加載，是使您的Web應用程序更高效並減小js bundle大小的最佳方法之一。咱們已經學習瞭如何使用Vue組件進行延遲加載。

在本系列的下一部分中，我將向您展現在任何Vue.js應用程序上得到顯着性能提高的最有用（也是最快）的方法。

您將學習如何使用異步路由拆分Vue代碼，以及此過程當中推薦的最佳實踐。