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
        }
        }

構建項目，重啓服務。
而後就享受頁面秒開的算酸爽吧.

原文地址：http://www.javashuo.com/article/p-hcqzcaui-cu.html