首屏優化系列（二）

---

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
複製代碼

2. 修改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技術介紹

以上只是個人看法，歡迎指正，共同進步。