手把手，從無到有帶你用vue進行項目實戰 系列二(cdn、gzip性能加速篇）

相關鏈接：

手把手，從無到有帶你用vue進行項目實戰 系列一(搭建框架篇)
手把手，從無到有帶你用vue進行項目實戰 系列三(深入剖析vue篇）

---

一、前言

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

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

需要溫習的小夥伴請點擊此處回顧手把手，從無到有帶你用vue進行項目實戰 系列一(搭建框架篇)

二、問題

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

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://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.5.3/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/2.5.0/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.17.1/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://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.5.3/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/2.5.0/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.17.1/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等需要壓縮等文件請求也是壓縮的後的文件了

---

相關鏈接：

手把手，從無到有帶你用vue進行項目實戰 系列一(搭建框架篇)
手把手，從無到有帶你用vue進行項目實戰 系列三(深入剖析vue篇）

---