首屏優化系列（二）

下雨天DY發表於2018-07-14
優化

title: 首屏優化系列（二） date: 2018-7-14 09:42:30 tags:

  • webpack
  • 圖片處理
  • element-ui categories: 前端

需求描述：優化首屏載入速度，減少白屏時間。(優化打包後的檔案體積)

繼上次的優化手段，測試都是基於本地的，主要涉及到資料請求方面，而這次優化是基於打包後的專案展開，本以為這次專案優化的已經非常不錯了，可是打包後vendor.js體積過大，還有首屏的圖片過大，導致初次進入頁面竟然要等到20秒甚至更多，這期間，頁面始終處於白屏狀態，在此之前，我並未意識到是自己的問題，還將其歸咎於網速的問題。。。

通過CDN的方式引入，減少vendor.js體積

  為什麼打包後vendor.js會那麼大呢？vendor為廠商的意思，即第三方，webpack將引用的第三方庫，打包為一個合集，本次專案引用的第三方庫較多，自然打包後的vendor.js就很大了，本次專案引入的第三方庫如下：

"dependencies": {
    "axios": "^0.18.0",
    "element-ui": "^2.2.1",
    "js-cookie": "^2.2.0",
    "qrcode": "^1.2.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "vue-lazyload": ""
  }
複製程式碼

注意 ⚠️ vue-cli中，可以執行'npm run build --report'來生成專案的依賴圖，通過這張圖，有助於分析檔案的大小，元件的執行指令碼。

通過分析得知，所引用的庫打包後的大小，elemnt-ui非常大，官方文件上講可以按需引入，結果，打包後檔案體積減少了100kb，相較於整個vendor.js來講，還是差別不大。像是這些相對成熟的庫，都是有對應的CDN的，諸如，cndjs、cdn.bootcss、unpkg.com等等，通過CDN的方式引入，速度要比引入我們本地的vendor.js快很多，對比了幾種cdn的載入速度後，選擇了CDNJS，載入速度比較快。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.3/theme-chalk/index.css"/>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.3/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-lazyload/1.2.6/vue-lazyload.js"></script>
複製程式碼

在引入這些庫的地方就可以去掉引入了，在build/webpack.base.config.js中新增externals：

externals: {
    'vue': 'Vue',
    'axios': 'axios',
    'vue-router': 'VueRouter',
    'element': 'element-ui',
    'vuex': 'Vuex',
    "vue-lazyload": "VueLazyload"
  }
複製程式碼

開啟gzip壓縮，生成壓縮檔案

  1. 安裝外掛
npm install --save-dev compression-webpack-plugin
複製程式碼
  1. 修改config/index.js中的productionGzip為true，執行build之後，每個js和css檔案會壓縮一個gz字尾的檔案，伺服器端配置gzip，如下：
gzip on;
gzip_types text/plain application/javascriptapplication/x-javascripttext/css application/xml;
複製程式碼

圖片處理

靜態圖片處理

  對於展示類的首頁，不能指望UI幫我們壓縮banner，可是好幾兆的圖片，在伺服器頻寬不足的情況下，載入是很慢的，測試了一下，一個1M的圖片，放到阿里雲OSS上，無快取初次請求需要100ms，200kb的圖片通過webpack打包，然後部署到伺服器上，請求需要4s，網路環境一致，索性，就把專案所有的靜態圖片都傳到阿里雲上了，然後建了一個常量檔案，進行管理，不得不說，這樣載入速度快了，打包速度也快了不少。

const IMG_URL = {
    // 首頁
    HOME: {
        BANNER1: 'https://oss-cn-beijing.aliyuncs.com/images/static-img/xx/xx.jpg'
    },
    COURSE_INDEX: {
        // 頭像背景檔案
        AVTOR_BG: 'https://oss-cn-beijing.aliyuncs.com/images/static-img/xx/xx.png'
    }
  }
複製程式碼

icon處理

  在我剛開始實習的時候使用的是css sprite，天啦嚕，真的是麻煩哦，每次改一次icon，都需要重新合成，然後就要重新計算位置，在一個專案中用了一次之後，果斷放棄了。iconfont非常好用，對於團隊合作也很方便，每次UI做完圖上傳上去就好了，大小，顏色什麼的，我們自己控制，尤其是做到一半，要換主題色的話，就更方便了，UI不用重新出圖，我們只改一個主題色的變數值就可以了（這種方式不支援多色icon，多色icon，如果想改變顏色，可以手動去改svg裡面的色值，通用不需要UI重新出圖） 使用方式和為什麼使用，已經有人寫的很明白了。

  1. 手摸手，帶你優雅的使用 icon
  2. 未來必熱：SVG Sprite技術介紹

專案依賴關係圖

以上只是我的見解，歡迎指正，共同進步。

相關文章