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 相关文章推荐
JS解密入门 最终变量劫持
Jun 25 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
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
php基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
PHP下10件你也许并不了解的事情
2008/09/11 PHP
php中Ctype函数用法详解
2014/12/09 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
分析在Python中何种情况下需要使用断言
2015/04/01 Python
Python卸载模块的方法汇总
2016/06/07 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
Python之多进程与多线程的使用
2021/02/23 Python
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
高二历史教学反思
2014/01/25 职场文书
承诺书格式范文
2014/06/03 职场文书
教师党员承诺书2015
2015/01/21 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
Golang数据类型和相互转换
2022/04/12 Golang
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js