All Projects → webpack-contrib → Compression Webpack Plugin

webpack-contrib / Compression Webpack Plugin

Licence: mit
Prepare compressed versions of assets to serve them with Content-Encoding

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Compression Webpack Plugin

Webpack Common Shake
CommonJS Tree Shaker plugin for WebPack
Stars: ✭ 875 (-28.75%)
Mutual labels:  webpack-plugin
Webpack Webextension Plugin
Webpack plugin that compiles WebExtension manifest.json files and adds smart auto reload
Stars: ✭ 47 (-96.17%)
Mutual labels:  webpack-plugin
Snackui
SnackUI 🍑 - the final React style library. With an *optimizing compiler* that lets you write views naturally, with easier DX, working on native and web at once, all while being faster than hand-rolling your own CSS.
Stars: ✭ 55 (-95.52%)
Mutual labels:  webpack-plugin
Tinypng Webpack Plugin
a tinyPNG plugin for webpack
Stars: ✭ 31 (-97.48%)
Mutual labels:  webpack-plugin
Persistgraphql Webpack Plugin
PersistGraphQL Webpack Plugin
Stars: ✭ 39 (-96.82%)
Mutual labels:  webpack-plugin
Treat
🍬 Themeable, statically extracted CSS‑in‑JS with near‑zero runtime.
Stars: ✭ 1,058 (-13.84%)
Mutual labels:  webpack-plugin
Prerender Spa Plugin
Prerenders static HTML in a single-page application.
Stars: ✭ 7,018 (+471.5%)
Mutual labels:  webpack-plugin
Svg Sprite Webpack Plugin
Webpack plugin for loading/extracting SVGs into a sprite file
Stars: ✭ 73 (-94.06%)
Mutual labels:  webpack-plugin
Dotenv Webpack
A secure webpack plugin that supports dotenv and other environment variables and only exposes what you choose and use.
Stars: ✭ 1,022 (-16.78%)
Mutual labels:  webpack-plugin
Optimize Css Assets Webpack Plugin
A Webpack plugin to optimize \ minimize CSS assets.
Stars: ✭ 1,082 (-11.89%)
Mutual labels:  webpack-plugin
Mpx Webpack Plugin
原生小程序开发定制 webpack 插件套装
Stars: ✭ 34 (-97.23%)
Mutual labels:  webpack-plugin
Webpack Aliyun Oss
一个webpack(version >= 4)插件,上传资源到阿里云oss。可以作为webpack插件使用,也可独立使用
Stars: ✭ 36 (-97.07%)
Mutual labels:  webpack-plugin
Node Env Webpack Plugin
Simplified `NODE_ENV` handling with webpack
Stars: ✭ 51 (-95.85%)
Mutual labels:  webpack-plugin
Event Hooks Webpack Plugin
Event hooks plugin for webpack
Stars: ✭ 30 (-97.56%)
Mutual labels:  webpack-plugin
Vue Builder Webpack Plugin
Webpack plugin to build vue files automatically
Stars: ✭ 70 (-94.3%)
Mutual labels:  webpack-plugin
Cloudflare Workers Webpack Plugin
Launch Cloudflare Workers to the Edge from the comfort of your build step 🚀
Stars: ✭ 18 (-98.53%)
Mutual labels:  webpack-plugin
Html Inline Css Webpack Plugin
☄️ A webpack plugin for convert external stylesheet to the embedded stylesheet
Stars: ✭ 48 (-96.09%)
Mutual labels:  webpack-plugin
Moment Timezone Data Webpack Plugin
Reduce moment-timezone data size for a webpack build
Stars: ✭ 80 (-93.49%)
Mutual labels:  webpack-plugin
Wcer
Webpack plugin to enable reloading while developing Chrome extensions.
Stars: ✭ 71 (-94.22%)
Mutual labels:  webpack-plugin
Nvue
master分支:webpack4实现一个vue的打包的项目,incremental: 实现增量模块打包
Stars: ✭ 55 (-95.52%)
Mutual labels:  webpack-plugin

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].