Vue CLI3 开启gzip压缩文件的方式


Posted in Javascript onSeptember 30, 2018

gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。

webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件:

npm i -D compression-webpack-plugin

在vue cli3.0 生成的项目里,可在 vue.config.js 中按照如下方式进行配置:

Vue CLI3 开启gzip压缩文件的方式

压缩前后大小大致如下:

Vue CLI3 开启gzip压缩文件的方式

生成的压缩文件以.gz为后缀:

Vue CLI3 开启gzip压缩文件的方式

一般浏览器都已支持.gz的资源文件,在http请求的Request Headers 中能看到 Accept-Encoding:gzip

Vue CLI3 开启gzip压缩文件的方式

要使服务器返回.gz文件,还需要对服务器进行配置,根据Request Headers的Accept-Encoding标签进行鉴别,如果支持gzip就返回.gz文件。

总结

以上所述是小编给大家介绍的Vue CLI3 开启gzip压缩文件的方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
限制文本框输入N个字符的js代码
May 13 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 Javascript
JS数组实现分类统计实例代码
Sep 30 #Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 #Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 #Javascript
vue使用v-for实现hover点击效果
Sep 29 #Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 #Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 #Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 #Javascript
You might like
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
DOM 高级编程
2015/05/06 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
Python中用于返回绝对值的abs()方法
2015/05/14 Python
Python多线程和队列操作实例
2015/06/21 Python
Python机器学习之决策树算法
2017/12/22 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
军训自我鉴定100字
2014/02/13 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
保护水资源的标语
2014/06/17 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
就业意向书
2014/07/29 职场文书
党员检讨书
2014/10/13 职场文书
女性健康讲座主持词
2015/07/04 职场文书
祝酒词范文
2015/08/12 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android