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 相关文章推荐
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
JS实现图片切换特效
Dec 23 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 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
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
Python中的filter()函数的用法
2015/04/27 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
html5时钟实现代码
2010/10/22 HTML / CSS
商场促销活动方案
2014/02/08 职场文书
节约用水的口号
2014/06/20 职场文书
管理人员岗位职责
2015/02/14 职场文书
丧事主持词
2015/07/02 职场文书
导游词之无锡梅园
2019/11/28 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server