2024年Web前端最新compression-webpack-plugin配合nginx进行gzip压缩(3)，2024年最新阿里巴巴面试技巧

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

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

篇幅有限，仅展示部分内容

#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里配置：

const productionGzipExtensions = [‘js’, ‘css’];

module.exports = {

configureWebpack: config => {

config.plugins.push(

new CompressionWebpackPlugin({

test: new RegExp(‘\.(’ + productionGzipExtensions.join(‘|’) + ‘)$’),

threshold: 1024 * 30, // 30K

minRatio: 0.8,

exclude: /node_modules/

})

);

},

}

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

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

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

[外链图片转存中…(img-6ppk6af6-1715419348814)]