一、前端vue.config.js配置

1、下载compression-webpack-plugin

cnpm i compression-webpack-plugin@6.1.1 --save

2、vue.config.js使用

const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件module.exports = {configureWebpack: config => {// 开发环境不配置if (process.env.NODE_ENV !== 'production') return// 生产环境才去配置return {plugins: [new CompressionPlugin({ filename: '[path].gz[query]', //  使得多个.gz文件合并成一个文件，这种方式压缩后的文件少，建议使用algorithm: 'gzip', // 官方默认压缩算法也是gziptest: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, // 使用正则给匹配到的文件做压缩，这里是给html、css、js以及字体（.ttf和.woff和.eot）做压缩threshold: 10240, //以字节为单位压缩超过此大小的文件，使用默认值10240吧minRatio: 0.8, // 最小压缩比率，官方默认0.8//是否删除原有静态资源文件，即只保留压缩后的.gz文件，建议这个置为false，还保留源文件。以防：deleteOriginalAssets: false})]}},
};

二、后端nginx配置

    server {gzip on; # 开启gzip压缩gzip_min_length 4k; # 小于4k的文件不会被压缩，大于4k的文件才会去压缩gzip_buffers 16 8k; # 处理请求压缩的缓冲区数量和大小，比如8k为单位申请16倍内存空间；使用默认即可，不用修改gzip_http_version 1.1; # 早期版本http不支持，指定默认兼容，不用修改gzip_comp_level 2; # gzip 压缩级别，1-9，理论上数字越大压缩的越好，也越占用CPU时间。实际上超过2的再压缩，只能压缩一点点了，但是cpu确是有点浪费。因为2就够用了# 压缩的文件类型 MIME类型，百度一下，一大把                                    # css             # xml             # 识别php     # 图片gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/x-woff font/ttf;# text                   # 早期js                 # js        # js的另一种写法                                                                                 # .eot字体                   # woff字体  # ttf字体gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding，一般情况下建议开启       }

判断是否配置成功

1、Vue打包的目录，对应压缩文件中就会多了.gz的文件；

2、在http请求中，也可以看到响应头多了Content-Encoding: gzip，没开启gzip压缩是没这个的。

webpack插件开启gzip压缩相关推荐

webpack+nginx开启gzip压缩部署项目
首先在服务器安装nginx sudo apt update sudo apt install nginx 安装完毕后将前端项目打包 webpack.output.publicPath里配置资源基础路径 ...
webpack 开启gzip压缩
开启gzip压缩可以有效压缩资源体积,压缩比率在3到10倍左右,可以大大节省服务器的网络带宽,提高资源获取的速度,但需要注意的是:并不是经过gzip压缩之后,所有文件都会变小.根据gzip使用的算法特 ...
性能优化实践：快速开启 Gzip 压缩
概念初探 Gzip,全称为 GNU zip,是一种无损压缩文件的算法.其底采用的是 DEFLATE,而 DEFLATE 是 LZ77 与哈夫曼编码的一个组合体. 通常来说,"Gzip 压 ...
Apache开启Gzip压缩,LAMP网页压缩
源自http://hi.baidu.com/mrlbz/blog/item/69447759beedafc19d82046b.html 我Wordpress的主机为LAMP架构,即Linux+ Apa ...
WordPress网站如何开启Gzip压缩快速传输
最近无聊都没有使用Gzip压缩,是因为发现开启这个压缩也是有学问的.服务器上设置.WordPress站点上设置还是插件上设置让我有所疑惑.通过几天的研究学习,总结并分享下如何将 WordPress 站 ...
Vite打包性能优化之开启Gzip压缩
在使用 vite 进行项目打包时,默认已经帮我们做了一些优化工作,比如代码的压缩,分包等等.除此之外,我们还有一些可选的优化策略,比如使用 CDN ,开启 Gzip 压缩等.本文会介绍在 vite 中 ...
godaddy php5.ini,Godaddy主机如何开启GZIP压缩 | Godaddy美国主机中文指南
为什么要开启GZIP压缩呢?原因很简单:使用GZIP压缩技术能让用户感受更快的速度.这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的网站时,服务器中的这个功能就将网页内容压缩后传输到 ...
apache开启 gzip 压缩
apache开启 gzip 压缩这里我使用的是Apache2.4.17 打开apache安装目录,找到conf目录,用记事本打开httpd.conf 文件. ctrl+f 查找去掉 #LoadMo ...
PHP网站开启gzip压缩,php中开启gzip压缩的2种方法代码
Gzip网页压缩可以大幅度提升网站访问速度,对于网站在国外的站来说,这是必不可少的一步,提升网页打开速度非常明显,现在我们就系统的来认识一下这个Gzip的庐山真面目. 一.何为GZIP GZIP概念 ...

webpack插件开启gzip压缩

一、前端vue.config.js配置

1、下载compression-webpack-plugin

2、vue.config.js使用

二、后端nginx配置

判断是否配置成功

webpack插件开启gzip压缩相关推荐

最新文章

热门文章