使用vue-cli構建的vue專案，在打包釋出的時候，發現打包後的檔案體積很大，使用webpack-bundle-analyzer分析後，發現佔用空間最多的是引用的第三方依賴。第三方的依賴檔案可以使用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