Web前端最全compression-webpack-plugin配合nginx进行gzip压缩(1)，2024年最新近期有什么面试

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

gzip是一种文件压缩格式，浏览器可以自动解压这种格式，服务器返回的是gzip的格式文件时，response的头部会有

Content-Encoding: gzip 这样的头部告诉浏览器：“我返回的是gzip格式文件，你要用对应的方法去解压它”

开启方式

=======================================================================

有两种方式可以让服务器返回的资源是gzip压缩文件：

一、在服务器端开启压缩http请求的目标文件，比如nginx（我只会nginx）,在nginx的配置文件里开启下面的配置,当http请求资源的时候，服务器就会将资源压缩后再传输给浏览器。但是这是要消耗cpu资源的。

gzip on;

gzip_min_length 5k;

gzip_buffers 4 16k;

#gzip_http_version 1.0;

gzip_comp_level 3;

gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

gzip_vary on;

gzip_comp_level 一共可以设置为1-9

越高压缩率越高 但是消耗的CPU也会非常多，而且超过6以后，压缩率减少不是特别明显了 ， 一般是设置为 4-5

二、第二种方式预先将资源压缩成gzip格式，再放入服务器里。前端使用webapck的插件compression-webpack-plugin来在打包时压缩文件 。了解 compression-webpack-plugin

npm install compression-webpack-plugin --save-dev

在webpack的plugins里配置：

new CompressionWebpackPlugin({

filename: ‘[path].gz[query]’, //压缩后的文件名

algorithm: 'gzip’, // 压缩格式 有：gzip、brotliCompress、

test: /.(js|css|svg)$/,

threshold: 10240,// 只处理比这个值大的资源，按字节算

minRatio: 0.8, //只有压缩率比这个值小的文件才会被处理，压缩率=压缩大小/原始大小，如果压缩后和原始文件大小没有太大区别，就不用压缩

deleteOriginalAssets: false //是否删除原文件，最好不删除，服务器会自动优先返回同名的.gzip资源，如果找不到还可以拿原始文件

})

在vue-cli的plugins里配置：

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中…(img-NY6PeRCP-1715852433349)]