解决vue-cli webpack打包开启Gzip 报错问题


Posted in Javascript onJuly 24, 2019

前两天项目上线,用vue-cli npm run build命令打包,打包完成后我擦吓了一跳,15M。本来暂时不打算优化的,但是每次看着部署包这么大,想想还是先优化一下,让包好看点,免得以后出现心理阴影!

在把 map文件干掉后,发现webpack这打包的速度,也忒感人了。在进行不自动生成 map文件设置时,有看到webpack自带的productionGzip功能,索性就一次性一起鼓捣鼓捣。

下面是瞎鼓捣历程,差点就鼓捣不出来了。

1、在项目 根目录config/index.js中build内找到productionGzip: false,把false改为true。与 productionSourceMap 刚好相反。

解决vue-cli webpack打包开启Gzip 报错问题

属性值修改后,这个时候可以执行 npm run build。但是会报错,提示找不到 "Cannot find module 'compression-webpack-plugin'"

解决vue-cli webpack打包开启Gzip 报错问题

2、也就是说需要安装依赖compression-webpack-plugin 官方推荐的命令是:(但是网不好的话就凉凉了)

npm install --save-dev compression-webpack-plugin //在没有给定版本号时该命令默认安装最新版compression-webpack-plugin,问题恰恰就出在这

安装完成以后,重新运行 npm run build,然后悲剧了:

解决vue-cli webpack打包开启Gzip 报错问题

从报错显示获知,是配置选项验证失败,但是是哪一项验证失败,或者那些项验证失败就不晓得了,打开报错日志,越看越蒙圈了,一脸茫然。从源代码里面也没看出个所以然。

解决vue-cli webpack打包开启Gzip 报错问题

从校验参数来看,参数就两个,但是第一个参数内属性很多。

解决vue-cli webpack打包开启Gzip 报错问题,从结果看是这行代码里面执行的校验失败了。至于这行代码执行的什么,水平不够查不下去了。

最后没得法了,只能去官网 https://www.npmjs.com/package/compression-webpack-plugin上看看,有么得啥突破。进去第一眼就瞄到了 2.0.0•Public•Published3 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 (此模块最低需要 Nodev6.9.0和Webpack v4.0.0),我这webpack版本明显差一大截。这下总算找到症结所在了。

解决vue-cli webpack打包开启Gzip 报错问题

解决vue-cli webpack打包开启Gzip 报错问题

解决vue-cli webpack打包开启Gzip 报错问题

3、找到症结所在,那处理起来就简单了。既然最新版本太高,在用的webpack高攀不起,那就只能给它降级了,木得法。

①卸载已经安装的最新版2.0compression-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 进行打包,终于成功了,真他妈艰难!

安装过程中,还遇到另外一个问题。网速和墙的问题:

解决vue-cli webpack打包开启Gzip 报错问题

这个倒是好解决,使用淘宝镜像 就行。 安装过程以及可能出现的问题和解决 可以移步https://3water.com/article/166090.htm进行参考!

总结

以上所述是小编给大家介绍的解决vue-cli webpack打包开启Gzip 报错问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
Highcharts学习之数据列
Aug 03 Javascript
浅谈JS继承_寄生式继承 & 寄生组合式继承
Aug 16 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
JS实现拖动模糊框特效
Aug 25 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 #Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 #Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 #Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 #Javascript
详解Vue中的基本语法和常用指令
Jul 23 #Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 #Javascript
node.js express框架简介与实现
Jul 23 #Javascript
You might like
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
php实现等比例压缩图片
2018/07/26 PHP
PHP实现微信退款功能
2018/10/02 PHP
jQuery实现自定义下拉列表
2015/01/05 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
Python延时操作实现方法示例
2018/08/14 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
python 调整图片亮度的示例
2020/12/03 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
求职自荐信格式
2013/12/04 职场文书
申论倡议书范文
2014/05/13 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
合作协议书模板
2014/10/10 职场文书
redis protocol通信协议及使用详解
2022/07/15 Redis