最近在用VueCli4版本寫(xiě)自己的網(wǎng)站患亿，想要重新復(fù)習(xí)一下之前的知識(shí)內(nèi)容慌核，順帶給我自己已經(jīng)放了兩年都沒(méi)怎么用的服務(wù)器放一下自己的網(wǎng)站。但是我發(fā)現(xiàn)央拖，在進(jìn)行項(xiàng)目打包后祭阀，vendors文件還是比較大鹉戚，導(dǎo)致在我小小服務(wù)器上面首屏顯示會(huì)特別的慢。

• 于是我開(kāi)始著手進(jìn)行項(xiàng)目的優(yōu)化柬讨，首先的話就是想到了CDN引入崩瓤。在VueCli3以上的版本配置的話都是需要新建一個(gè)vue.config.js的，然后在內(nèi)部進(jìn)行具體內(nèi)容的實(shí)現(xiàn)踩官。

module.exports = {
configureWebpack: {
    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT',
      'axios': 'axios',
      'vuex': 'Vuex',
      'moment':'moment',
      'highlight':'highlight'
    },
  }
}

• 在這里我用CDN引入了Vue却桶、Vue-router、element-ui蔗牡、axios颖系、Vuex、moment辩越、highlight（該插件為富文本高亮插件嘁扼，我用的vue-quill-editor富文本編輯器，但是不知道如何CDN引入也沒(méi)有找到CDN黔攒，有知道的大佬希望指教一下趁啸。）

• 配置過(guò)vue.config.js之后還需要在public中的index中，使用CDN引入對(duì)應(yīng)的JS文件以及CSS文件督惰。（此處部分內(nèi)容依賴(lài)VueJS所以需要先引入Vuejs）

//index.html
<link  rel="stylesheet">
<link  rel="stylesheet">
 .......
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/locale/zh-cn.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-lazyload/1.3.3/vue-lazyload.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>

• 在引入CDN之后不傅，我們還需要在main.js中使用這些CDN

const Vue = require('vue')
//語(yǔ)法高亮
const hljs = require('highlight.js')
// 懶加載
const VueLazyLoad = require('vue-lazyload')
// 時(shí)間函數(shù)
const moment = require('moment')
Vue.use(axios)
Vue.use(VueAxios)
Vue.use(VueLazyLoad,{
  loading:'/loading-svg/loading-bars.svg'
})

• 感覺(jué)沒(méi)有什么兩樣，在最開(kāi)始赏胚，我在查詢(xún)相關(guān)資料的時(shí)候访娶，有人說(shuō)也可以使用以下的方式來(lái)進(jìn)行引用，無(wú)需進(jìn)行require

/* global Vue */ 
以該方式進(jìn)行引入觉阅，這樣的方式可以省去require的過(guò)程崖疤。
目前萌新的我還是有待探索，有知道的大佬希望可以賜教典勇，感激感激感激劫哼！

• 這樣的話我們就可以進(jìn)行build了，我用的yarn所以是yarn build痴柔。在打包的時(shí)候可以使用一個(gè)參數(shù) --report 該參數(shù)可以生成一個(gè)html文件沦偎，讓打包的用戶看到自己在打包過(guò)程中，哪些資源占用情況咳蔚。具體如下圖所示豪嚎。

  
  
  build

• 除此打包以外，還有就是剛才說(shuō)到的--report的一個(gè)使用會(huì)生成report的html文件谈火，具體占用如下圖所示侈询，希望大佬指正，感謝感謝感謝糯耍。

  
  
  report
• 可以看到圖片扔字，其實(shí)是已經(jīng)沒(méi)有Vue囊嘉、Vue-router、以及element-ui這些內(nèi)容了革为，只有就是我目前不清楚具體如何優(yōu)化的quilljs以及highlight扭粱。放在我的服務(wù)器上還是會(huì)很慢很慢，于是我注意到了我打包的時(shí)候右方顯示的Gzipped震檩，它的大小是正常情況下的四分之一了應(yīng)該琢蛤。
• 說(shuō)做就做，于是查看相關(guān)gzip的信息抛虏。（可是我剛才看到那個(gè)貼子之后發(fā)現(xiàn)也查不到了博其，如果原作者看到貼的代碼出自您的話可以聯(lián)系我給地址貼上去。抱歉抱歉）

plugins: [
      new CompressionWebpackPlugin({
          filename: '[path].gzip[query]',   // 提示compression-webpack-plugin@2.0.0的話filename改為asset
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240, //內(nèi)容超過(guò)10KB進(jìn)行壓縮
          minRatio: 0.8
      })
    ],

• 同樣都是放在configureWebpack下的迂猴。配置如上所示慕淡。有需要的大佬們可以看一下，有錯(cuò)誤希望指正沸毁，感謝峰髓！

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  js/chunk-vendors.12ccee18.js (855 KiB)
  js/chunk-vendors.12ccee18.js.gzip (283 KiB)

 warning  

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB)
. This can impact web performance.
Entrypoints:
  app (867 KiB)
      js/chunk-vendors.12ccee18.js
      css/app.1882e4d6.css
      js/app.93e052ca.js

• 在打包過(guò)程中也可能會(huì)出現(xiàn)如下的情況，所以可以再添加如下的配置便可以解決該問(wèn)題息尺。

performance:{
        hints:'warning',
            //入口起點(diǎn)的最大體積
            maxEntrypointSize: 50000000,
            //生成文件的最大體積
            maxAssetSize: 30000000,
    }

• 這樣我們配置完成了Vue的Gzip壓縮儿普，我們嘗試壓縮一下看一下。

  
  
  gzip

• 如圖所示掷倔，Gzip壓縮后的內(nèi)容確實(shí)會(huì)比原來(lái)的內(nèi)容小很多，這樣的話也從側(cè)面提升了首頁(yè)渲染以及加載的性能个绍。我們接下來(lái)放入服務(wù)器中勒葱。

  
  
  request
• 起初只是在request中看到了gzip，但是response還是看不到巴柿，所以需要配置nginx的gzip壓縮凛虽，如下所示。

    gzip  on;
    gzip_min_length 1k;
    gzip_comp_level 5;
    #   # 進(jìn)行壓縮的文件類(lèi)型广恢。;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;     
    #是否在http header中添加Vary: Accept-Encodin;
    gzip_vary on;
    # 設(shè)置壓縮所需要的緩沖區(qū)大小凯旋，以4k為單位，如果文件為7k則申請(qǐng)2*4k的緩沖區(qū);
    gzip_buffers 2 4k;

• 配置完成之后進(jìn)入nginx的sbin目錄钉迷，進(jìn)行./nginx -reload 重啟至非。
  重啟之后我們?cè)俅螄L試打開(kāi)網(wǎng)頁(yè)看一下。

  
  
  yes!

• 成功啦糠聪，這次的是response返回的內(nèi)容荒椭，并且以往需要7s時(shí)間加載的文件，本次只需要2s就加載完成了（雖然還是很慢很痛苦舰蟆，如果有大佬有更好的方法趣惠，感謝感謝賜教狸棍。）

  
  
  vendors
  
  

  以上就是本次CDN優(yōu)化以及Gzip壓縮的具體內(nèi)容了，希望對(duì)觀看的各位有所幫助味悄。