前兩天項目上線，用vue-cli npm run build命令打包，打包完成后我擦嚇了一跳，15M。本來暫時不打算優(yōu)化的，但是每次看著部署包這么大，想想還是先優(yōu)化一下，讓包好看點(diǎn)，免得以后出現(xiàn)心理陰影！

為猇亭等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及猇亭網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計、猇亭網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

在把 map文件干掉后，發(fā)現(xiàn)webpack這打包的速度，也忒感人了。在進(jìn)行不自動生成 map文件設(shè)置時，有看到webpack自帶的productionGzip功能，索性就一次性一起鼓搗鼓搗。

下面是瞎鼓搗歷程，差點(diǎn)就鼓搗不出來了。

1、在項目 根目錄config/index.js中build內(nèi)找到productionGzip: false，把false改為true。與 productionSourceMap 剛好相反。

屬性值修改后，這個時候可以執(zhí)行 npm run build。但是會報錯，提示找不到 "Cannot find module 'compression-webpack-plugin'"

2、也就是說需要安裝依賴compression-webpack-plugin 官方推薦的命令是：(但是網(wǎng)不好的話就涼涼了)

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

安裝完成以后，重新運(yùn)行 npm run build，然后悲劇了：

從報錯顯示獲知，是配置選項驗(yàn)證失敗，但是是哪一項驗(yàn)證失敗，或者那些項驗(yàn)證失敗就不曉得了，打開報錯日志，越看越蒙圈了，一臉茫然。從源代碼里面也沒看出個所以然。

從校驗(yàn)參數(shù)來看，參數(shù)就兩個，但是第一個參數(shù)內(nèi)屬性很多。

，從結(jié)果看是這行代碼里面執(zhí)行的校驗(yàn)失敗了。至于這行代碼執(zhí)行的什么，水平不夠查不下去了。

最后沒得法了，只能去官網(wǎng) https://www.npmjs.com/package/compression-webpack-plugin上看看，有么得啥突破。進(jìn)去第一眼就瞄到了 2.0.0•Public•Published3 months ago，一下就感覺有點(diǎn)不對了，一般小版本的更新都是 1.xx.xx，很少這種直接全零的，全零的一般適用于大版本的升級更新，再看看上面的配置項檢驗(yàn)失敗，選項屬性匹配不上。突然有種莫名被坑的感覺。接著看下面的介紹和文檔，①先對應(yīng)了下node的版本 node@v8.11.3，還在匹配的范圍內(nèi)。② Requirements：This module requires a minimum of Node v6.9.0 and Webpack v4.0.0 (此模塊最低需要 Nodev6.9.0和Webpack v4.0.0)，我這webpack版本明顯差一大截。這下總算找到癥結(jié)所在了。

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

①卸載已經(jīng)安裝的最新版2.0compression-webpack-plugin安裝包。

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

② 重新安裝1.1.12版本(該版本為1.1的最新版)。卸載其實(shí)可以不用，直接執(zhí)行安裝命令，進(jìn)行版本覆蓋也行。

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

③等安裝好之后，重新執(zhí)行 npm run build 進(jìn)行打包，終于成功了，真他媽艱難！

安裝過程中，還遇到另外一個問題。網(wǎng)速和墻的問題：

這個倒是好解決，使用淘寶鏡像 就行。 安裝過程以及可能出現(xiàn)的問題和解決 可以移步https://www.jb51.net/article/166090.htm進(jìn)行參考！

總結(jié)

以上所述是小編給大家介紹的解決vue-cli webpack打包開啟Gzip 報錯問題,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

標(biāo)題名稱：解決vue-cliwebpack打包開啟Gzip報錯問題
本文來源：http://jinyejixie.com/article22/iiedcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站內(nèi)鏈、網(wǎng)頁設(shè)計公司、自適應(yīng)網(wǎng)站、微信小程序、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)