Vue項目打包壓縮：讓頁面更快響應

本文發佈於個人我的網站： http://wintc.top/article/34，轉載請註明。

　　影響網頁響應速度的因素有不少，例如：http請求次數太多、服務器自己處理請求過久、請求內容太大、JS腳本執行耗時過長、瀏覽器迴流重繪等。網站頁面的響應速度與用戶體驗息息相關，直接影響到用戶是否願意繼續訪問你的網站。對於Vue項目而言，最廣泛的問題可能在於打包後的文件太大，致使加載時間過長。

　　個人一個小項目，僅有三四個頁面，但由於服務器帶寬過小了，加載時間過長的問題尤其明顯，因而採用路由懶加載和gzip壓縮的方式優化了一下，訪問速度獲得了顯著提高。

1、路由懶加載：分割代碼塊

　　Vue支持異步組件，便可以在使用組件的地方使用一個Promise，Promise最終會經過resolve回傳一個組件對象。而webpack的動態import的方式可讓代碼分塊進行打包，而且返回一個Promise（正是異步組件所須要的）。在路由配置表裏使用import能夠將各個頁面組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應的組件，這樣就避免將全部內容打包在一個chunk裏，從而「按需加載」，大大提升響應速度。

　　沒有使用動態加載的路由配置方式：

// router.js
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)

import Home from '@/pages/Home'
import Tree from '@/pages/Tree'
import SearchHighlight from '@/pages/SearchHighlight'
import Watermark from '@/pages/Watermark'

export default new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      children: [
        {
          path: 'tree',
          name: 'Tree',
          component: Tree
        },
        {
          path: 'search-highlight',
          name: 'SearchHighlight',
          component: SearchHighlight
        },
        {
          path: 'watermark',
          name: 'Watermark',
          component: Watermark
        }
      ]
    }
  ]
})

　　執行yarn build（或npm run build）打包，查看dist文件夾下的js和css:

　　能夠看到打包後js和css下各有兩個文件，其中chunk-vendors文件包含了全部頁面js或者css文件，大小分別爲769K、270K。如今修改路由配置使用動態加載組件的方式打包，來看一下打包的文件是怎樣的。

　　使用 () => import('xxx')的形式引入組件：

// router.js
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/',
      component: () => import('@/pages/Home'),
      children: [
        {
          path: 'tree',
          name: 'Tree',
          component: () => import('@/pages/Tree')
        },
        {
          path: 'search-highlight',
          name: 'SearchHighlight',
          component: () => import('@/pages/SearchHighlight')
        },
        {
          path: 'watermark',
          name: 'Watermark',
          component: () => import('@/pages/Watermark')
        }
      ]
    }
  ]
})

執行yarn build（或npm run build）打包，查看dist文件夾下的js和css:

　　js和css文件夾下各多出來了4個chunk-*文件，恰好對應咱們動態引入的4個組件，這樣在咱們訪問到某個頁面，纔會加載頁面對應的chunk-*.js和chunk-*.css。觀察文件大小，核心的JS文件chunk-venders大小從769K下降到了725K，由於個人4個頁面代碼都很是簡單，看起來優化效果不大，然而在一個頁面不少的大型項目中，優化效果會很是明顯，CSS部分也是如此。

2、壓縮請求資源

1. 原理介紹

　　平常咱們在使用網盤的時候，上傳一個很大的文件夾確定很慢，這時候咱們會把它壓縮成一個壓縮包，須要下載的時候下載下來解壓就能夠了，這樣大大節省了上傳和下載的時間。一樣的原理能夠用於網絡請求，當咱們向服務器請求一個資源時，好比js或者css文件，服務器將文件壓縮，而後返回到瀏覽器，瀏覽器操做解壓以後便可使用。

　　首先瀏覽器在發送請求的時候，會經過請求頭Accept-Encoding告知服務器，本瀏覽器支持哪些編碼格式的資源。打開瀏覽器的network，查看當前網頁的某個請求的請求頭：

　　Accept-Encoding的值表示瀏覽器支持gzip生成的編碼格式或者deflate壓縮算法生成的編碼格式，這就告訴服務器，若是能夠把該請求的資源用這兩個方法壓縮一下給我也是能夠的。Accept-Encoding可能還會有compress壓縮、identity不壓縮的默認格式。

　　若是服務器對資源進行壓縮編碼了，它就會經過響應頭Content-Encoding告知當前請求用了什麼編碼格式，固然若是服務器沒幹這事，則不會返回這個響應頭，好比某個請求用gzip壓縮了返回的內容：

2. 服務器配置

　　通常咱們部署到服務器會使用nginx來作代理服務器，全部的請求都經過nginx轉發，這裏演示一下nginx配置gzip壓縮文件後再返回。配置前先看看示例項目發佈到線上的請求狀況：

　　能夠看到以前生成的chunk-vendors文件，大小725K，請求時間7.10秒，其中下載時間7.05秒，太慢了。配置一下nginx，打開gzip:

server {
        gzip on;
        gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
}

　　這個配置做用是，當nginx服務器返回gzip_types中列出的內容類型時，先使用gzip進行壓縮（固然，前提是請求方支持gzip），執行sudo nginx -s reload讓該配置生效，此時刷新剛纔的頁面看一下效果:

　　一樣的一個請求，請求內容的大小變成了216K，而下載時間直接下降到了1s多，效果顯著！nginx還有gzip的其它配置項，好比能夠用gzip_comp_level能夠控制壓縮率（固然壓縮率更高可能意味着更大的服務器消耗），有興趣的同窗能夠查看nginx文檔。

3. webpack打包時直接使用gzip壓縮

　　上一步驟中，返回內容是在請求服務器的時候使用gzip進行壓縮的。這樣存在的問題時，對於同一個資源的不一樣請求，反覆壓縮，這無疑會增長服務器的CPU和內存消耗。使用webpack的話，能夠直接用compression-webpack-plugin插件對咱們的代碼進行壓縮。先安裝compression-webpack-plugin到dev依賴：

// yarn安裝
yarn add compression-webpack-plugin -D
// 或npm
npm install compression-webpack-plugin --save-dev

　　簡單配置，更多配置可瞭解官方文檔：compression-webpack-plugin:

const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
  // ...
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        test: /\.(js|css)?$/i, // 哪些文件要壓縮
        filename: '[path].gz[query]',　// 壓縮後的文件名
        algorithm: 'gzip',　// 使用gzip壓縮
        minRatio: 1,　// 壓縮率小於1纔會壓縮
        deleteOriginalAssets: true // 刪除未壓縮的文件，謹慎設置，若是但願提供非gzip的資源，可不設置或者設置爲false
      })
    ]
  }
}

　　打包一下看看dist下的js和css文件夾，如今文件都被壓縮成了.gz：

　　通過壓縮以後chunk-vendors僅有176K，比起原始的725K，壓縮了近80%。像圖片、字體之類的也能夠用這個方法進行壓縮，只要修改test配置項的正則表達式匹配這類文件便可。不過如今，還須要在nginx服務器配置一下靜態壓縮：

server {
    gzip on;
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
    
    gzip_static on;
}

　　gzip_static設置爲on以後，這樣在訪問資源的時候，若是存在「資源路徑.gz」的文件，則會直接返回該文件，其優先級高於動態的gzip。如今訪問一下頁面：

　　若是把鼠標懸指到chunk-vendors的size上，能夠看到提示「176KB transfered over network, resource size: 724K」。若是你的項目出現請求資源文件太大，能夠試試gzip之類的壓縮手段，相信有立竿見影的效果。