相關連結：

一、前言

在系列一中桃子叔叔介紹了使用iview-cli構建專案框架並基於框架進行的相關改造，主要包括：

1. 路徑規範
2. dev-server配置
3. 啟用熱更新
4. 封裝axios
5. 解決跨域

二、問題

經過以上的改造，已經能夠滿足基本生產開發的需求了，執行

npm run dev

便可以檢視開發環境的頁面了。

執行

npm run build

便可以檢視生產環境的頁面，但是我們檢視dist檔案下的vendors.**********.js檔案大小有1.3M,這個發到線上又是讓人頭疼的一件事，雖然檔案不是很大，但是最少也要10多秒的時間載入，這顯然不是完美主義能接受的。

二、優化方案

桃子叔叔主要帶大家進行兩方面的優化

• cdn加速
• gzip配置

1、cdn加速

主要優化的模組是（以我個人專案為例）
我的專案中引入了以下模組vue vue-router vuex axios

引入cdn檔案
我使用的是bootcdn
1.1 頁面引入cdn檔案
首先修改index.html檔案

	<div id="app"></div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.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/axios/0.18.0/axios.min.js"></script>
    <script type="text/javascript" src="/dist/vendors.js"></script>
    <script type="text/javascript" src="/dist/main.js"></script>
 

然後是模版檔案index.ejs檔案

    <div id="app"></div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.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/axios/0.18.0/axios.min.js"></script>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[1] %>"></script>
 

1.2 刪除依賴

這些依賴以前是使用npm安裝，現在需要在專案檔案註釋掉（或直接刪除這些依賴），所有用到這些你需要替換的第三方依賴檔案的程式碼都需要刪除或註釋

首先修改main.js檔案

//import Vue from 'vue';
//import VueRouter from 'vue-router';
//import Vuex from 'vuex';

//Vue.use(VueRouter);
//Vue.use(Vuex);

然後修改webpack.base.config.js檔案,新增externals相關。

module.exports = {  
    externals: {
	    'vue': 'Vue',
	    'vue-router':'VueRouter',
	    "vuex":'Vuex',
	    'axios':'axios',
	  },
	  ......
 }

注意後面的名稱是改模組暴露出來的名稱。

2、開啟

主要是webpack裡compression-webpack-plugin模組的實現，
這個模組需要單獨安裝：

npm install --save -dev compression-webpack-plugin

然後修改webpack.prod.config.js檔案

const CompressionWebpackPlugin = require('compression-webpack-plugin');
......
module.exports = merge(webpackBaseConfig, {
		......
		plugins: [
		......
		new CompressionWebpackPlugin({
	        asset: '[path].gz[query]',// 目標檔名
	        algorithm: 'gzip',// 使用gzip壓縮
	        test: new RegExp(
	            '\\.(js|css)$' // 壓縮 js 與 css
	        ),
	        threshold: 10240,// 資原始檔大於10240B=10kB時會被壓縮
	        minRatio: 0.8 // 最小壓縮比達到0.8時才會被壓縮
	    })
    ]
 });

修改伺服器的配置，如Nginx
找到conf目錄下的nginx.conf ,開啟gzip,並設定gzip的型別，如下

gzip  on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

此時再次執行

npm run build

我們發現在下面紅框中多了幾個gz檔案

由於服務端開啟了gzip訪問，重新部署伺服器

nginx -s reload 

發現js等需要壓縮等檔案請求也是壓縮的後的檔案了

相關連結：