CompressionWebpackPlugin 是一个 Webpack 插件，用于在构建过程中对生成的资源进行压缩。通过压缩资源文件，可以减小文件大小，加快页面加载速度，提升用户体验。
安装
首先，你需要安装 compression-webpack-plugin 包：
npm install compression-webpack-plugin --save-dev
使用
在 webpack.config.js 文件中引入 CompressionWebpackPlugin，并将其添加到插件列表中：
const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
// 其他配置
plugins: [
new CompressionWebpackPlugin()
]
};配置选项
CompressionWebpackPlugin 支持传入一些配置选项，来定制压缩行为。下面是一些常用的配置选项：
test: 用于匹配需要被压缩的文件，默认为/\.js$|\.html$|\.css/。threshold: 只有文件大小大于该值时才进行压缩，默认为0。minRatio: 只有文件压缩率大于该值时才进行压缩，默认为0.8。deleteOriginalAssets: 是否删除原始文件，默认为false。
new CompressionWebpackPlugin({
test: /\.(js|css)$/,
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: true
})示例
假设有一个简单的 webpack 配置文件如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------------------ - --------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- --------------------------
----- --------------
---------- ------
--------- ----
--------------------- ----
--
-
--当构建项目时，CompressionWebpackPlugin 将会对 bundle.js 文件进行压缩，生成一个压缩后的文件。
总结
通过使用 CompressionWebpackPlugin 插件，我们可以在构建过程中对资源文件进行压缩，从而提高页面加载速度，优化用户体验。希望以上内容能够帮助你更好地使用该插件。