Napoleon's Penguin Mascot

    @theia/compression-webpack-plugin

    3.0.0 • Public • Published

    npm node deps tests cover chat size

    compression-webpack-plugin

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

    Requirements

    This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.

    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

    test

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

    Test to match files against.

    // in your webpack.config.js
    new CompressionPlugin({
      test: /\.js(\?.*)?$/i,
    });

    include

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

    Files to include.

    // in your webpack.config.js
    new CompressionPlugin({
      include: /\/includes/,
    });

    exclude

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

    Files to exclude.

    // in your webpack.config.js
    new CompressionPlugin({
      exclude: /\/excludes/,
    });

    cache

    Type: Boolean|String Default: false

    Enable file caching. The default path to cache directory: node_modules/.cache/compression-webpack-plugin.

    Boolean

    Enable/disable file caching.

    // in your webpack.config.js
    new CompressionPlugin({
      cache: true,
    });

    String

    Enable file caching and set path to cache directory.

    // in your webpack.config.js
    new CompressionPlugin({
      cache: 'path/to/cache',
    });

    filename

    Type: String|Function Default: [path].gz[query]

    The target asset filename.

    String

    [file] is replaced with the original asset filename. [path] is replaced with the path of the original asset. [query] is replaced with the query.

    // in your webpack.config.js
    new CompressionPlugin({
      filename: '[path].gz[query]',
    });

    Function

    // in your webpack.config.js
    new CompressionPlugin({
      filename(info) {
        // info.file is the original asset filename
        // info.path is the path of the original asset
        // info.query is the query
        return `${info.path}.gz${info.query}`;
      },
    });

    algorithm

    Type: String|Function Default: gzip

    The compression algorithm/function.

    String

    The algorithm is taken from zlib.

    // in your webpack.config.js
    new CompressionPlugin({
      algorithm: 'gzip',
    });

    Function

    Allow to specify a custom compression function.

    // in your webpack.config.js
    new CompressionPlugin({
      algorithm(input, compressionOptions, callback) {
        return compressionFunction(input, compressionOptions, callback);
      },
    });

    compressionOptions

    Type: Object Default: { level: 9 }

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

    Compression options. You can find all options here zlib.

    // in your webpack.config.js
    new CompressionPlugin({
      compressionOptions: { level: 1 },
    });

    threshold

    Type: Number Default: 0

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

    // in your webpack.config.js
    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 all assets.

    // in your webpack.config.js
    new CompressionPlugin({
      minRatio: 0.8,
    });

    deleteOriginalAssets

    Type: Boolean Default: false

    Whether to delete the original assets or not.

    // in your webpack.config.js
    new CompressionPlugin({
      deleteOriginalAssets: true,
    });

    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 11.7.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 11.7.0 and later by just passing in the appropriate algorithm to the CompressionPlugin:

    // in your webpack.config.js
    module.exports = {
      plugins: [
        new CompressionPlugin({
          filename: '[path].br[query]',
          algorithm: 'brotliCompress',
          test: /\.(js|css|html|svg)$/,
          compressionOptions: { level: 11 },
          threshold: 10240,
          minRatio: 0.8,
          deleteOriginalAssets: false,
        }),
      ],
    };

    N.B.: The level option matches BROTLI_PARAM_QUALITY for Brotli-based streams

    Contributing

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

    CONTRIBUTING

    License

    MIT

    Keywords

    Install

    npm i @theia/compression-webpack-plugin

    DownloadsWeekly Downloads

    1,516

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    30 kB

    Total Files

    7

    Last publish

    Collaborators

    • marc.dumais
    • paul-marechal
    • bhufmann
    • vince-fugnitto
    • eclipsetheia