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 相关文章推荐
jQuery html()等方法介绍
Nov 18 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
vue-test-utils初使用详解
May 23 Javascript
jQuery实现本地存储
Dec 22 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下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
jQuery最佳实践完整篇
2011/08/20 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
python网页请求urllib2模块简单封装代码
2014/02/07 Python
Python元字符的用法实例解析
2018/01/17 Python
python 定时修改数据库的示例代码
2018/04/08 Python
Python饼状图的绘制实例
2019/01/15 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
Django框架模板的使用方法示例
2019/05/25 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
同程旅游英文网站:LY.com
2018/11/13 全球购物
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android