Wondering what’s next for npm?Check out our public roadmap! »

    compression-webpack-plugin
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/compression-webpack-plugin package

    7.1.2 • Public • Published

    npm node deps tests cover chat size

    compression-webpack-plugin

    Prepare compressed versions of assets to serve them with Content-Encoding.

    Getting Started

    To begin, you'll need to install compression-webpack-plugin:

    $ npm install compression-webpack-plugin --save-dev

    Then add the plugin to your webpack config. For example:

    webpack.config.js

    const CompressionPlugin = require("compression-webpack-plugin");
    
    module.exports = {
      plugins: [new CompressionPlugin()],
    };

    And run webpack via your preferred method.

    Options

    Name Type Default Description
    test {String|RegExp|Array<String|RegExp>} undefined Include all assets that pass test assertion
    include {String|RegExp|Array<String|RegExp>} undefined Include all assets matching any of these conditions
    exclude {String|RegExp|Array<String|RegExp>} undefined Exclude all assets matching any of these conditions
    algorithm {String|Function} gzip The compression algorithm/function
    compressionOptions {Object} maximum available compression level, for gzip: { level: 9 } Compression options for algorithm
    threshold {Number} 0 Only assets bigger than this size are processed (in bytes)
    minRatio {Number} 0.8 Only assets that compress better than this ratio are processed (minRatio = Compressed Size / Original Size)
    filename {String|Function} [path][base].gz The target asset filename
    deleteOriginalAssets {Boolean|'keep-source-map'} false Whether to delete the original assets or not

    test

    Type: String|RegExp|Array<String|RegExp> Default: undefined

    Include all assets that pass test assertion.

    webpack.config.js

    module.exports = {
      plugins: [
        new CompressionPlugin({
          test: /\.js(\?.*)?$/i,
        }),
      ],
    };

    include

    Type: String|RegExp|Array<String|RegExp> Default: undefined

    Include all assets matching any of these conditions.

    webpack.config.js

    module.exports = {
      plugins: [
        new CompressionPlugin({
          include: /\/includes/,
        }),
      ],
    };

    exclude

    Type: String|RegExp|Array<String|RegExp> Default: undefined

    Exclude all assets matching any of these conditions.

    webpack.config.js

    module.exports = {
      plugins: [
        new CompressionPlugin({
          exclude: /\/excludes/,
        }),
      ],
    };

    algorithm

    Type: String|Function Default: gzip

    The compression algorithm/function.

    ℹ️ If you use custom function for the algorithm option, the default value of the compressionOptions option is {}.

    String

    The algorithm is taken from zlib.

    webpack.config.js

    module.exports = {
      plugins: [
        new CompressionPlugin({
          algorithm: "gzip",
        }),
      ],
    };

    Function

    Allow to specify a custom compression function.

    webpack.config.js

    module.exports = {
      plugins: [
        new CompressionPlugin({
          algorithm(input, compressionOptions, callback) {
            return compressionFunction(input, compressionOptions, callback);
          },
        }),
      ],
    };

    compressionOptions

    Type: Object Default: { level: 9 }

    Compression options for algorithm.

    You can find all options here zlib.

    ℹ️ If you use custom function for the algorithm option, the default value is {}.

    webpack.config.js

    module.exports = {
      plugins: [
        new CompressionPlugin({
          compressionOptions: { level: 1 },
        }),
      ],
    };

    threshold

    Type: Number Default: 0

    Only assets bigger than this size are processed. In bytes.

    webpack.config.js

    module.exports = {
      plugins: [
        new CompressionPlugin({
          threshold: 8192,
        }),
      ],
    };

    minRatio

    Type: Number Default: 0.8

    Only assets that compress better than this ratio are processed (minRatio = Compressed Size / Original Size). Example: you have image.png file with 1024b size, compressed version of file has 768b size, so minRatio equal 0.75. In other words assets will be processed when the Compressed Size / Original Size value less minRatio value.

    You can use 1 value to process assets that are smaller than the original.

    Use a value of Infinity to process all assets even if they are larger than the original size or their original size is 0 bytes (useful when you are pre-zipping all assets for AWS).

    Use a value of Number.MAX_SAFE_INTEGER to process all assets even if they are larger than the original size, excluding assets with their original size is 0 bytes.

    webpack.config.js

    module.exports = {
      plugins: [
        new CompressionPlugin({
          // Compress all assets, including files with `0` bytes size
          // minRatio: Infinity
    
          // Compress all assets, excluding files with `0` bytes size
          // minRatio: Number.MAX_SAFE_INTEGER
    
          minRatio: 0.8,
        }),
      ],
    };

    filename

    Type: String|Function Default: "[path][base].gz"

    The target asset filename.

    String

    For example we have assets/images/image.png?foo=bar#hash:

    [path] is replaced with the directories to the original asset, included trailing / (assets/images/).

    [file] is replaced with the path of original asset (assets/images/image.png).

    [base] is replaced with the base ([name] + [ext]) of the original asset (image.png).

    [name] is replaced with the name of the original asset (image).

    [ext] is replaced with the extension of the original asset, included . (.png).

    [query] is replaced with the query of the original asset, included ? (?foo=bar).

    [fragment] is replaced with the fragment (in the concept of URL it is called hash) of the original asset (#hash).

    webpack.config.js

    module.exports = {
      plugins: [
        new CompressionPlugin({
          filename: "[path][base].gz",
        }),
      ],
    };

    Function

    webpack.config.js

    module.exports = {
      plugins: [
        new CompressionPlugin({
          filename(pathData) {
            // The `pathData` argument contains all placeholders - `path`/`name`/`ext`/etc
            // Available properties described above, for the `String` notation
            if (/\.svg$/.test(pathData.file)) {
              return "assets/svg/[path][base].gz";
            }
    
            return "assets/js/[path][base].gz";
          },
        }),
      ],
    };

    deleteOriginalAssets

    Type: Boolean | 'keep-source-map' Default: false

    Whether to delete the original assets or not.

    webpack.config.js

    module.exports = {
      plugins: [
        new CompressionPlugin({
          deleteOriginalAssets: true,
        }),
      ],
    };

    To exclude sourcemaps from compression

    module.exports = {
      plugins: [
        new CompressionPlugin({
          exclude: /.map$/
          deleteOriginalAssets: 'keep-source-map',
        }),
      ],
    };

    Examples

    Using Zopfli

    Prepare compressed versions of assets using zopfli library.

    ℹ️ @gfx/zopfli require minimum 8 version of node.

    To begin, you'll need to install @gfx/zopfli:

    $ npm install @gfx/zopfli --save-dev

    webpack.config.js

    const zopfli = require("@gfx/zopfli");
    
    module.exports = {
      plugins: [
        new CompressionPlugin({
          compressionOptions: {
            numiterations: 15,
          },
          algorithm(input, compressionOptions, callback) {
            return zopfli.gzip(input, compressionOptions, callback);
          },
        }),
      ],
    };

    Using Brotli

    Brotli is a compression algorithm originally developed by Google, and offers compression superior to gzip.

    Node 10.16.0 and later has native support for Brotli compression in its zlib module.

    We can take advantage of this built-in support for Brotli in Node 10.16.0 and later by just passing in the appropriate algorithm to the CompressionPlugin:

    webpack.config.js

    const zlib = require("zlib");
    
    module.exports = {
      plugins: [
        new CompressionPlugin({
          filename: "[path][base].br",
          algorithm: "brotliCompress",
          test: /\.(js|css|html|svg)$/,
          compressionOptions: {
            params: {
              [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
            },
          },
          threshold: 10240,
          minRatio: 0.8,
          deleteOriginalAssets: false,
        }),
      ],
    };

    Note Brotli’s BROTLI_PARAM_QUALITY option is functionally equivalent to zlib’s level option. You can find all Brotli’s options in the relevant part of the zlib module documentation.

    Multiple compressed versions of assets for different algorithm

    webpack.config.js

    const zlib = require("zlib");
    
    module.exports = {
      plugins: [
        new CompressionPlugin({
          filename: "[path][base].gz",
          algorithm: "gzip",
          test: /\.js$|\.css$|\.html$/,
          threshold: 10240,
          minRatio: 0.8,
        }),
        new CompressionPlugin({
          filename: "[path][base].br",
          algorithm: "brotliCompress",
          test: /\.(js|css|html|svg)$/,
          compressionOptions: {
            params: {
              [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
            },
          },
          threshold: 10240,
          minRatio: 0.8,
        }),
      ],
    };

    Contributing

    Please take a moment to read our contributing guidelines if you haven't yet done so.

    CONTRIBUTING

    License

    MIT

    Keywords

    Install

    npm i compression-webpack-plugin

    DownloadsWeekly Downloads

    1,171,902

    Version

    7.1.2

    License

    MIT

    Unpacked Size

    46.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar