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 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
jQuery html()等方法介绍
Nov 18 Javascript
js 图片等比例缩放代码
May 13 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
vue改变循环遍历后的数据实例
Nov 07 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
PHP 采集程序原理分析篇
2010/03/05 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
项目实践之javascript技巧
2007/12/06 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
Python中zip()函数用法实例教程
2014/07/31 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
python访问系统环境变量的方法
2015/04/29 Python
Python之py2exe打包工具详解
2017/06/14 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
Python3中exp()函数用法分析
2019/02/19 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
python绘制多个子图的实例
2019/07/07 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
什么是python的自省
2020/06/21 Python
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
小学生优秀评语大全
2014/04/22 职场文书
保安辞职信范文
2015/02/28 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
使用pytorch实现线性回归
2021/04/11 Python
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript