CompressionWebpackPlugin

[![npm][npm]][npm-url] [![node][node]][node-url] [![deps][deps]][deps-url] [![tests][tests]][tests-url] [![cover][cover]][cover-url] [![chat][chat]][chat-url] [![size][size]][size-url]

预先提供带 Content-Encoding 编码的压缩版本的资源。

需求

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

起步

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.

选项

test

类型：String|RegExp|Array<String|RegExp> Default: undefined

匹配所有对应的文件。

// 在 webpack.config.js 中
new CompressionPlugin({
  test: /\.js(\?.*)?$/i
})

include

类型：String|RegExp|Array<String|RegExp> 默认：undefined

所有包含(include)的文件。

// 在 webpack.config.js 中
new CompressionPlugin({
  include: /\/includes/
})

exclude

类型：String|RegExp|Array<String|RegExp> 默认：undefined

所有排除(exclude)的文件。

// 在 webpack.config.js 中
new CompressionPlugin({
  exclude: /\/excludes/
})

cache

类型：Boolean|String 默认：false

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

Boolean

Enable/disable file caching.

// 在 webpack.config.js 中
new CompressionPlugin({
  cache: true
})

String

Enable file caching and set path to cache directory.

// 在 webpack.config.js 中
new CompressionPlugin({
  cache: 'path/to/cache'
})

filename

类型：String|Function 默认：[path].gz[query]

目标资源文件名称。

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.

// 在 webpack.config.js 中
new CompressionPlugin({
  filename: '[path].gz[query]'
})

Function

// 在 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

类型：String|Function 默认：gzip

The compression algorithm/function.

String

The algorithm is taken from zlib.

// 在 webpack.config.js 中
new CompressionPlugin({
  algorithm: 'gzip'
})

Function

Allow to specify a custom compression function.

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

compressionOptions

类型：Object 默认：{ level: 9 }

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

Compression options. You can find all options here zlib.

// 在 webpack.config.js 中
new CompressionPlugin({
  compressionOptions: { level: 1 }
})

threshold

类型：Number 默认：0

只处理比这个值大的资源。按字节计算。

// 在 webpack.config.js 中
new CompressionPlugin({
  threshold: 8192
})

minRatio

类型：Number 默认：0.8

只有压缩率比这个值小的资源才会被处理（minRatio = 压缩大小 / 原始大小）。 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.

// 在 webpack.config.js 中
new CompressionPlugin({
  minRatio: 0.8
})

deleteOriginalAssets

类型：Boolean 默认：false

是否删除原始资源。

// 在 webpack.config.js 中
new CompressionPlugin({
  deleteOriginalAssets: true
})

示例

使用 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);
      }
    })
  ]
}

使用 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:

// 在 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