2024年最新compression-webpack-plugin配合nginx进行gzip压缩(5)，2024年最新面试资料分享

对象篇

模块化编程-自研模块加载器

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

二、第二种方式预先将资源压缩成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/

})

);

},

}

然后执行打包命令，压缩后的文件都有.gzip的后缀。

同时nginx也要加上下面的配置，这是让nginx根据http请求优先返回gzip的文件。

gzip_static: on

ajax

1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

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

15695556162)]

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