解決vue-cli webpack打包開啟Gzip 報(bào)錯(cuò)問題
前兩天項(xiàng)目上線，用vue-cli npm run build命令打包，打包完成后我擦嚇了一跳，15M。本來暫時(shí)不打算優(yōu)化的，但是每次看著部署包這么大，想想還是先優(yōu)化一下，讓包好看點(diǎn)，免得以后出現(xiàn)心理陰影！
在把 map文件干掉后，發(fā)現(xiàn)webpack這打包的速度，也忒感人了。在進(jìn)行不自動(dòng)生成 map文件設(shè)置時(shí)，有看到webpack自帶的productionGzip功能，索性就一次性一起鼓搗鼓搗。
下面是瞎鼓搗歷程，差點(diǎn)就鼓搗不出來了。
1、在項(xiàng)目 根目錄config/index.js中build內(nèi)找到productionGzip: false，把false改為true。與 productionSourceMap 剛好相反。
屬性值修改后，這個(gè)時(shí)候可以執(zhí)行 npm run build。但是會(huì)報(bào)錯(cuò)，提示找不到 "Cannot find module 'compression-webpack-plugin'"
2、也就是說需要安裝依賴compression-webpack-plugin 官方推薦的命令是：(但是網(wǎng)不好的話就涼涼了)
npm install --save-dev compression-webpack-plugin //在沒有給定版本號時(shí)該命令默認(rèn)安裝最新版compression-webpack-plugin，問題恰恰就出在這
安裝完成以后，重新運(yùn)行 npm run build，然后悲劇了：
從報(bào)錯(cuò)顯示獲知，是配置選項(xiàng)驗(yàn)證失敗，但是是哪一項(xiàng)驗(yàn)證失敗，或者那些項(xiàng)驗(yàn)證失敗就不曉得了，打開報(bào)錯(cuò)日志，越看越蒙圈了，一臉茫然。從源代碼里面也沒看出個(gè)所以然。
從校驗(yàn)參數(shù)來看，參數(shù)就兩個(gè)，但是第一個(gè)參數(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，很少這種直接全零的，全零的一般適用于大版本的升級更新，再看看上面的配置項(xiàng)檢驗(yàn)失敗，選項(xiàng)屬性匹配不上。突然有種莫名被坑的感覺。接著看下面的介紹和文檔，①先對應(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高攀不起，那就只能給它降級了，木得法。
?、傩遁d已經(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 //記得帶版本號
?、鄣劝惭b好之后，重新執(zhí)行 npm run build 進(jìn)行打包，終于成功了，真他媽艱難！
安裝過程中，還遇到另外一個(gè)問題。網(wǎng)速和墻的問題：
這個(gè)倒是好解決，使用淘寶鏡像 就行。 安裝過程以及可能出現(xiàn)的問題和解決 可以移步http://chabaoo.cn/article/166090.htm進(jìn)行參考！
總結(jié)
以上所述是小編給大家介紹的解決vue-cli webpack打包開啟Gzip 報(bào)錯(cuò)問題,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了vue組件傳值的11種方式總結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue中引入使用patch-package為依賴打補(bǔ)丁問題
這篇文章主要介紹了Vue中引入使用patch-package為依賴打補(bǔ)丁問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue項(xiàng)目通過node連接MySQL數(shù)據(jù)庫并實(shí)現(xiàn)增刪改查操作的過程詳解
最近在研究vue項(xiàng)目中使用node.js搭建server服務(wù)器,鏈接本地mysql數(shù)據(jù)庫,進(jìn)行數(shù)據(jù)操作,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目通過node連接MySQL數(shù)據(jù)庫并實(shí)現(xiàn)增刪改查操作的相關(guān)資料,需要的朋友可以參考下2022-05-05
Vue+Element實(shí)現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng)(推薦)
這篇文章主要介紹了Vue+Element實(shí)現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng),需要的朋友可以參考下2019-12-12
在vue3中,?提供了一個(gè)?useAttrs?的方法它接收到的參數(shù)一?prop中可以接收到的數(shù)據(jù)是基本一樣的如果我們想自已寫一個(gè)組件,?把?elementPlus?中的期中一個(gè)組件封裝一下,這篇文章主要介紹了vue3中的useAttrs和props的區(qū)別,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了詳解polyfills如何按需加載及場景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02![解決Vue3.0刷新頁面警告[Vue Router warn]:No match found for location with path /xxx](http://img.jbzj.com/images/xgimg/bcimg6.png)
解決Vue3.0刷新頁面警告[Vue Router warn]:No match
這篇文章主要介紹了解決Vue3.0刷新頁面警告[Vue Router warn]:No match found for location with path /xxx問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
本篇文章主要介紹了淺談Vue2.0父子組件間事件派發(fā)機(jī)制，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
Vue-router是Vue的核心組件，主要是作為Vue的路由管理器，Vue-router默認(rèn)hash模式，本文講給大家詳細(xì)分析Vue路由Hash模式，文中有相關(guān)的代碼示例供大家參考，感興趣的同學(xué)可以借鑒一下2023-06-06
本文通過實(shí)例代碼給大家介紹了vue interceptor 使用,需要的朋友可以參考下2018-09-09