vue項目優化--使用CDN和Gzip

使用vue-cli構建的vue項目，在打包發布的時候，發現打包后的文件體積很大，使用webpack-bundle-analyzer分析后，發現占用空間最多的是引用的第三方依賴。第三方的依賴文件可以使用cdn外鏈的方式引入，這樣就能大大縮小項目文件的體積。預防cdn鏈接失效，無縫切換本地文件

具體實現（以我個人項目為例）
我的項目中引入了以下模塊vue vue-router vuex axios moment highlight.js。

引入cdn文件
我使用的是bootcdn
其中moment.js需要額外引入中文語言
highlight.js需要引入自己需要的語言
我的項目中會展示javascript/html/css/bash/markdown (html支持需要引入xml)

//index.html

 <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script>
  <script src="https://cdn.bootcss.com/moment.js/2.20.1/locale/zh-cn.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/javascript.min.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/bash.min.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/xml.min.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/css.min.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/markdown.min.js"></script>

刪除依賴
這些依賴以前是使用npm安裝，現在需要在項目文件注釋掉（或直接刪除這些依賴），所有用到這些你需要替換的第三方依賴文件的代碼都需要刪除或注釋

eg:
// import Vue from 'vue'
// import VueRouter from 'vue-router'

然后在webpack的配置文件里加入如下代碼

  externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'axios': 'axios',
    'moment': 'moment',
    'highlight.js': 'highlight.js'
  }

注意后面的名稱是改模塊暴露出來的名稱，具體不熟悉的可以到引入的js源碼里查看。

開啟gzip加速
打包時，可以將config/index.js文件的productionGzip設置為true
主要是webpack里compression-webpack-plugin模塊的實現。

使用node服務器需要安裝 compression模塊

express實現
const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression({ threshold: 9 }))

nginx實現

  //conf文件里
  server {
        listen       8088;
        server_name  localhost;
        location / {
            gzip on;
            gzip_min_length 1k;
            gzip_buffers 16 64k;
            gzip_http_version 1.1;
            gzip_comp_level 9;
            gzip_types text/plain text/javascript application/javascript image/jpeg image/gif image/png application/font-woff application/x-javascript text/css application/xml;
            gzip_vary on;
            root   /xxx/xxx/xxx;
            index index.html
        }
        }

構建項目，重啟服務。
然后就享受頁面秒開的算酸爽吧.

原文地址：https://segmentfault.com/a/1190000013239622