Vue CLI3 开启gzip压缩

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

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

npm i -D compression-webpack-plugin

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

压缩前后大小大致如下:

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

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

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

原文地址:https://www.cnblogs.com/yangshifu/p/9724709.html

时间: 2024-11-01 01:23:58

Vue CLI3 开启gzip压缩的相关文章

php简单开启gzip压缩方法(zlib.output_compression)

网上的教程基本是你抄我来我抄他,不外乎加头加尾或者自构函数两种写法.实际上每个php页面都要去加代码——当然也可以include引用,不过总显得略微麻烦 一般而言,页面文件开启gzip压缩以后,其体积可以减小60%~90%,对于文字类站点,可以节省下大量的带宽与用户等待时间.但是不论是iis还是apache默认都只压缩html类静态文件,对于php文件需要模块配置才可支持(iis7.5中开启动态+静态压缩也可以),于是利用php自身功能到达gzip的效果也成为一项合理的诉求. 网上的教程基本是你

Tomcat7中开启gzip压缩功能的配置方法

使用gzip压缩可以减少数据传输大小,加快网页加载速度.很多大站都开启了gzip压缩,不过也有很多网站并没有开启gzip压缩,上次看了一篇文章说开启gzip压缩后对搜索引擎不友好,但从带宽和流量的角度来看,还是有必要开启gzip压缩的. 对于tomcat7服务器,打开conf文件夹下的server.xml 文件,找到 复制代码 代码如下: <Connector port="8080" protocol="HTTP/1.1" connectionTimeout=

WIN2003服务器IIS下如何开启GZIP压缩

在上一篇文章黑客流谈到了关于网页打开速度对SEO的影响,其中提到了网页开启Gzip压缩的好处,接下来我来和大家分享一下WINDOWS系统IIS服务器下如何开启Gzip压缩. 首先我们来了解一下什么是Gzip,Gzip是GNU zip的缩写,它是一个GNU自由软件的文件压缩程序,也经常用来表示gzip这种文件格式.gzip可以极大的加速网站,最高可以达到80%的压缩比率,利用Gzip的压缩算法来对服务器发布的网页内容进行压缩后再传输到客户端浏览器,这样实际上降低了网络传输的字节数,最明显的好处就是

修改Apache配置文件开启gzip压缩传输

转自:http://down.chinaz.com/server/201202/1645_1.htm 最近无事研究一些Web的优化,用工具page speed检测网站时发现还没有开启gzip压缩,于是上网找来资料实验一下:在apache2.0以上(包括apache2.0)的版中gzip压缩使用的是mod_deflate模块,下面是具体配置步骤 第1步 LoadModule deflate_module modules/mod_deflate.so LoadModule headers_modul

Apache开启Gzip压缩

1. 编辑Apache的httpd.conf文件 vim /etc/httpd/conf/httpd.conf 2. 开启mod_deflate.so模块 LoadModule deflate_module modules/mod_deflate.so 3. 对该模块进行配置 # GG到最下一行添加如下内容 <IfModule mod_deflate.c> # 压缩等级 9 DeflateCompressionLevel 9 # 压缩类型 html.xml.php.css.js SetOutp

apache 配置静态文件缓存和开启gzip压缩

1,设置文件静态缓存3天: 在httpd.conf 里添加如下代码: #文件静态缓存配置 <IfModule expires_module> #打开缓存 ExpiresActive on #文件缓存259200/3600/24=3天 ExpiresByType text/css A259200 ExpiresByType application/x-javascript A259200 ExpiresByType application/javascript A259200 ExpiresBy

【转载】HttpWebRequest开启gzip压缩简介

在用HttpWebRequest对象时,一般我们都没有开启gzip压缩,如果服务端返回的数据比较大,这是我们需要开启gzip压缩,怎么开启呢? 1.给HttpWebRequest对象,添加如下Header: request.Headers.Add("Accept-Encoding", "gzip"); 2.对接收到的流进行解码: private string GetResponseBody(HttpWebResponse response) { string res

Nginx开启gzip压缩功能

在Nginx安装完成之后,我们可以开启Gzip压缩功能,这里Nginx默认只能对text/html类型的文件进行压缩.下面的指令为开启Gzip的指令: gzip on; gzip_http_version 1.0; gzip_disable "MSIE [1-6]."; gzip_types text/plain application/x-javascript text/css text/javascript; 如果要能够是Nginx开启图片压缩功能,在配置文件中添加如下代码: gz

Apache开启gzip压缩和http缓存的配置

一.Apache开启gzip压缩 首先说下gzip配置的方法,在apache中gzip压缩使用的是mod_deflate模块,  以下是具体的配置方法和步骤: 步骤一:   LoadModule deflate_module modules/mod_deflate.so   LoadModule headers_module modules/mod_headers.so    打开http.conf后,先将上面两行配置前面的#号去掉,这样apache就会启用这两个模块,其中mod_deflate