小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
WangScaler: 一个用心创作的作者。
声明：才疏学浅，如有错误，恳请指正。
上篇文章开发小技巧之Nginx的GZIP，我们讲述了nginx开启gzip之后，我的博客提速甚是明显，但是唯一的缺点就是每次部署都得手动将js压缩，那么今天就来使用webpack的插件compression-webpack-plugin，将我们的项目编译的时候自动压缩。
安装依赖
npm i compression-webpack-plugin
这样安装的是最新的版本，但是我们的webpack可能版本没那么高，就会出现问题，例如找不到某一属性，导致编译不成功，所以建议大家降低版本，我这里直接选择的一年前的版本5.0.0
npm install --save-dev compression-webpack-plugin@5.0.0
配置
如果大家不是vuepress项目可参官方文档,进行配置。我们这里以vuepress的主题vuepress-theme-reco为例。
在config.js首行添加
const CompressionPlugin = require("compression-webpack-plugin");
然后在module.exports = {}里追加
configureWebpack: {
plugins: [new CompressionPlugin({
filename: "[path].gz", //编译后的文件名
algorithm: "gzip",
test: /.js$|.css$|.html$/,//需要编译的文件
threshold: 10240,//需要编译的文件大小
minRatio: 0.8,//压缩比
deleteOriginalAssets: false,//编译时是否删除源文件
})],
},
注意： 使用vuepress的同学，正常使用插件都是在plugins里进行配置，这里不是在那配置，而是和plugins同级的configureWebpack中进行配置。因为这个是配置的webpack，切勿搞错了。否则不会编译成功。
检查
npm run build
编译完成之后，打开我们的编译之后的文件夹public/assets/js里面的文件大于10k的后缀是.gz证明配置成功
最后
配置完成之后，必须结合nginx开启gzip方可，开启的方法，可参考上期文章开发小技巧之Nginx的GZIP
必看文章
与本文相关的文章连读。
来都来了，点个赞再走呗！
关注WangScaler，祝你升职、加薪、不提桶！
