解决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 相关文章推荐
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
javascript去除空格方法小结
May 21 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
js canvas实现橡皮擦效果
Dec 20 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 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 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
orm获取关联表里的属性值
2016/04/17 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
Python实现定时任务
2017/02/08 Python
Python 多线程实例详解
2017/03/25 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
利用python绘制正态分布曲线
2021/01/04 Python
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
留学自荐信的技巧
2013/10/17 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
公司授权委托书样本
2014/09/15 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
人生遥控器观后感
2015/06/11 职场文书
导游词之桂林
2019/08/20 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python