Vue -- vue-cli webpack打包開啓Gzip 報錯

前兩天項目上線，用vue-cli npm run build命令打包，打包完成後我擦嚇了一跳，15M。原本暫時不打算優化的，可是每次看着部署包這麼大，想一想仍是先優化一下，讓包好看點，省得之後出現心理陰影！

　　在把 map文件幹掉後，發現 webpack 這打包的速度，也忒感人了。在進行不自動生成 map文件設置時，有看到webpack自帶的 productionGzip功能，索性就一次性一塊兒鼓搗鼓搗。

下面是瞎鼓搗歷程，差點就鼓搗不出來了。

　　一、在項目 根目錄config/index.js  中  build 內找到  productionGzip: false， 把 false改成true。與 productionSourceMap 恰好相反。

　　  屬性值修改後，這個時候能夠執行 npm run build。可是會報錯，提示找不到 " Cannot find module 'compression-webpack-plugin'"

　　

　　二、也就是說須要安裝依賴 compression-webpack-plugin 官方推薦的命令是：(可是網很差的話就涼涼了)

npm install --save-dev compression-webpack-plugin    //在沒有給定版本號時該命令默認安裝最新版compression-webpack-plugin，問題偏偏就出在這。

　　　　安裝完成之後，從新運行 npm run build，而後悲劇了：

　　

　　　　從報錯顯示獲知，是配置選項驗證失敗，可是是哪一項驗證失敗，或者那些項驗證失敗就不曉得了，打開報錯日誌，越看越蒙圈了，一臉茫然。從源代碼裏面也沒看出個因此然。

　　　　從校驗參數來看，參數就兩個，可是第一個參數內屬性不少。

　　，從結果看是這行代碼裏面執行的校驗失敗了。至於這行代碼執行的什麼，水平不夠查不下去了。

 

 　　　　最後沒得法了，只能去官網 https://www.npmjs.com/package/compression-webpack-plugin 上看看，有麼得啥突破。進去第一眼就瞄到了 2.0.0 • Public • Published 3 months ago，一下就感受有點不對了，通常小版本的更新都是 1.xx.xx，不多這種直接全零的，全零的通常適用於大版本的升級更新，再看看上面的配置項檢驗失敗，選項屬性匹配不上。忽然有種莫名被坑的感受。接着看下面的介紹和文檔，①先對應了下node的版本 node@v8.11.3，還在匹配的範圍內。② Requirements：This module requires a minimum of Node v6.9.0 and Webpack v4.0.0 (此模塊最低須要 Node v6.9.0和Webpack v4.0.0)，我這webpack版本明顯差一大截。這下總算找到癥結所在了。

　　　　　　　　

　　　　

　　三、找到癥結所在，那處理起來就簡單了。既然最新版本過高，在用的webpack高攀不起，那就只能給它降級了，木得法。

　　　　①卸載已經安裝的最新版2.0 compression-webpack-plugin 安裝包。

npm uninstall --save-dev compression-webpack-plugin

　　　　② 從新安裝1.1.12版本(該版本爲1.1的最新版)。卸載其實能夠不用，直接執行安裝命令，進行版本覆蓋也行。

npm install --save-dev compression-webpack-plugin@1.1.12　　　　//記得帶版本號

　　　　③等安裝好以後，從新執行 npm run build 進行打包，終於成功了，真他媽艱難！

 

安裝過程當中，還遇到另一個問題。網速和牆的問題：

　　

 

第二種方法

vendor打包過大的緣由就是引用三方插件的js太大了 ，能夠直接引用鏡像解決問題

解決辦法以下

1.在webpack.base.conf.js中新增配置項 表示webpack不需打包的文件 ，‘插件名’: '項目中別名'

 

 

2.在index.html中引入相應鏡像文件

 

 

完成。

圖一 沒使用鏡像引入

 

 

圖二僅引入vue

 

 

圖三引入element後