Vue -- vue-cli(vue腳手架) npm run build打包優化

　　這段時間公司新項目立項，開發組選用 Vue2.0 進行開發。固然也就一併用到 vue cli 進行自動化構建。結果在基礎版本開發完成後，用 npm run build 命令打包上線時，發現如下幾個問題。雖然這些問題對項目正常運行影響不大，可是卻對性能影響比較大。

　　一、加載圖片過多，過大時，加載緩慢；　　二、部署包過大，上傳緩慢；

原本想偷個懶，優化的事放到之後再說，可是每次上傳服務器，包太大本身都感受不爽。因此索性先優化了再說！

一、加載圖片過多，過大時，加載緩慢；

　　緣由：

　　解決方案：

二、部署包過大，上傳緩慢

　　緣由一：vue-cli npm run build 命令打包時默認會把 dependencies 中的依賴統一打包，這就致使打包後的 vendor.js 文件過大，從而使得首次啓動時下載 vendor.js 緩慢。

　　解決方案：像vue、axios、element-ui、iView 這些引入之後基本不會再進行修改的依賴能夠經過cdn引入(固然前提是能夠接入外網，並且網速不錯)，沒必要要打包到 vendor.js 中。具體寫法以下：

　　①在項目 根目錄 index.html 使用cdn節點引入各類依賴（前端所需的各類依賴安裝大部分均可以在 https://cdn.bootcss.com/  上找到）

<!-- 先引入 Vue -->
<!--開發環境-->
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
<!--生產環境-->
<!--<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>-->
<!-- 引入axios -->
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!-- 若是使用element-ui  則引入element-ui， 沒找到index.min.js-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/index.js"></script>
<!-- 若是使用iView  則引入iView-->
<script type="text/javascript" src="https://cdn.bootcss.com/iview/3.1.4/iview.min.js"></script>
<!-- 兩個UI框架能夠同時添加，衝突覆蓋不多-->

　　　　②在項目 根目錄 build/webpack.base.config.js 中 module.exports 內添加 externals

externals: {
    'vue': 'Vue', 
    'axios':'axios',
    'element': 'element-ui'
},

　　　　③在項目 根目錄 src/mian.js  中將以上經過CDN已經引入的依賴 import ... from ... 刪除(如：import Vue from 'vue')，若沒有刪除則webpack仍是會把對應的依賴進行打包。

　　緣由二：vue-cli npm run build 命令打包時默認會生成 相對應的map文件，從而致使打包後的整個 static文件夾 過大(尤爲是vendor.js.map最大)，使得部署和上傳緩慢。項目打包代碼通過壓縮加密之後，若是運行時報錯，輸出的錯誤信息根本沒法精肯定位是哪裏的代碼報錯。但map文件就能夠像未加密的代碼同樣，準確的輸出是哪一行哪一列報錯，這就是map文件的用處。（可是實際在項目上線以前會將全部的調試代碼和日誌代碼所有刪除，就算有map文件存在，實際上你也不知道在哪報錯。除非是系統性bug致使系統卡死了，瀏覽器拋出錯誤，既然都是系統性bug了那麼根本不能上線，因此map文件我的以爲不必存在!）

　　　　

　　解決方案：將map文件幹掉，固然這個幹掉不是手動刪除，而是在webpack打包時不產生map文件。

　　　　在項目 根目錄 config/index.js  中  build 內找到  productionSourceMap: true,　把 true改成false。從而從新打包之後，系統就不會自動生成 map文件了。


　　　　

　　

　　緣由三：vue-cli npm run build 命令打包時 壓縮優化不完全。這裏 webpack 其實自帶有一個優化打包的方法(Gzip 文件壓縮)，只是 vue-cli 默認沒有使用。

　　解決法案：①在項目 根目錄config/index.js  中  build 內找到  productionGzip: false， 把 false改成true。與 productionSourceMap 恰好相反。

　　　　

      　　②安裝插件 compression-webpack-plugin　　注:安裝的時候帶上版本號，如今 compression-webpack-plugin 2.0已出，默認該命令安裝最新版，最新版本和當前的webpack不匹配，要報錯。 

cnpm install --save-dev compression-webpack-plugin@1.1.12            //1.1最新版

      　　③compression-webpack-plugin安裝完成後，npm run build 執行後會發現js文件夾內每一個js文件都有一個相對應的gz後綴文件，並且gz文件比相對應的js文件小不少。瀏覽器若是支持 g-zip 會自動查找有沒有gz文件，找到了就直接加載gz文件而後本地解壓並執行。

 

這一連串搗鼓操做完成後，再來看壓縮後的兩個dist文件夾，這區別那是大大的！