5分钟上手compression-webpack-plugin：从安装到配置的快速入门

compression-webpack-plugin是一款强大的Webpack插件，能够为你的项目资产生成压缩版本，通过Content-Encoding提供给客户端，有效提升网站加载速度和性能表现。## 📦 快速安装步骤首先确保你的项目中已经安装了Webpack（版本需≥5.1.0），然后通过npm或yarn快速安装compression-webpack-plugin：```bash

乔昊稳Oliver

383人浏览 · 2026-02-22 02:42:41

乔昊稳Oliver · 2026-02-22 02:42:41 发布

5分钟上手compression-webpack-plugin：从安装到配置的快速入门

【免费下载链接】compression-webpack-plugin Prepare compressed versions of assets to serve them with Content-Encoding 项目地址: https://gitcode.com/gh_mirrors/co/compression-webpack-plugin

compression-webpack-plugin是一款强大的Webpack插件，能够为你的项目资产生成压缩版本，通过Content-Encoding提供给客户端，有效提升网站加载速度和性能表现。

📦 快速安装步骤

首先确保你的项目中已经安装了Webpack（版本需≥5.1.0），然后通过npm或yarn快速安装compression-webpack-plugin：

# 使用npm安装
npm install compression-webpack-plugin --save-dev

# 或使用yarn安装
yarn add compression-webpack-plugin --dev

如果你需要从源码构建，可以克隆项目仓库：

git clone https://gitcode.com/gh_mirrors/co/compression-webpack-plugin
cd compression-webpack-plugin
npm install
npm run build

compression-webpack-plugin的立方体图标象征着它能够高效打包和压缩各种类型的项目资产

⚙️ 基础配置指南

安装完成后，在你的webpack.config.js中引入并配置插件：

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin({
      // 压缩算法，默认是gzip
      algorithm: 'gzip',
      // 只处理大于8KB的文件
      threshold: 8192,
      // 只有压缩率小于0.8的文件才会被保留
      minRatio: 0.8
    })
  ]
};

这个基础配置已经能够满足大多数项目的需求，它会自动对所有符合条件的资产进行gzip压缩。

🎯 核心参数详解

compression-webpack-plugin提供了丰富的配置选项，让你可以根据项目需求进行精细化控制：

test - 匹配文件规则

通过test参数可以指定需要压缩的文件类型：

new CompressionPlugin({
  test: /\.(js|css|html|svg)$/
})

include/exclude - 包含/排除文件

精细控制哪些文件需要或不需要压缩：

new CompressionPlugin({
  include: /src/,
  exclude: /node_modules/
})

filename - 输出文件名

自定义压缩文件的命名方式：

new CompressionPlugin({
  filename: '[path][base].gz'
})

deleteOriginalAssets - 删除原始文件

如果你不需要保留原始未压缩文件，可以设置：

new CompressionPlugin({
  deleteOriginalAssets: true
})

注意：生产环境中建议谨慎使用deleteOriginalAssets，确保你的服务器正确配置了Content-Encoding响应头

🚀 高级使用技巧

使用其他压缩算法

除了默认的gzip算法，你还可以使用如brotli等更高效的压缩算法：

const zlib = require('zlib');

new CompressionPlugin({
  algorithm: 'brotliCompress',
  compressionOptions: {
    level: 11
  },
  filename: '[path][base].br',
  test: /\.(js|css|html|svg)$/,
  threshold: 8192,
  minRatio: 0.8
})

多算法同时压缩

你可以在Webpack配置中同时使用多个CompressionPlugin实例，为同一批文件生成不同格式的压缩版本：

module.exports = {
  plugins: [
    new CompressionPlugin({
      filename: '[path][base].gz',
      algorithm: 'gzip'
    }),
    new CompressionPlugin({
      filename: '[path][base].br',
      algorithm: 'brotliCompress'
    })
  ]
};