webpack/compression-webpack-pluginPublic

NotificationsYou must be signed in to change notification settings
Fork109
Star1.4k

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

License

MIT license

1.4k stars 109 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 284 Commits
.github/workflows		.github/workflows
.husky		.husky
src		src
test		test
types		types
.cspell.json		.cspell.json
.editorconfig		.editorconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierignore		.prettierignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
commitlint.config.js		commitlint.config.js
eslint.config.mjs		eslint.config.mjs
jest.config.js		jest.config.js
lint-staged.config.js		lint-staged.config.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Repository files navigation

compression-webpack-plugin

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

Getting Started

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

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

yarn add -D compression-webpack-plugin

pnpm add -D compression-webpack-plugin

Then add the plugin to yourwebpack config. For example:

webpack.config.js

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

Finally, runwebpack using the method you normally use (e.g., via CLI or an npm script).

Options

`test`

Type:

typetest=string|RegExp|(string|RegExp)[];

Default:undefined

Include all assets that pass test assertion.

webpack.config.js

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

`include`

Type:

typeinclude=string|RegExp|(string|RegExp)[];

Default:undefined

Include all assets matching any of these conditions.

webpack.config.js

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

`exclude`

Type:

typeexclude=string|RegExp|(string|RegExp)[];

Default:undefined

Exclude all assets matching any of these conditions.

webpack.config.js

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

`algorithm`

Type:

typealgorithm=|string|((input:Buffer,options:CompressionOptions,callback:(error:Error|null|undefined,result:|string|ArrayBuffer|SharedArrayBuffer|Uint8Array|readonlynumber[]|{valueOf():ArrayBuffer|SharedArrayBuffer;}|{valueOf():string|Uint8Array|readonlynumber[];}|{valueOf():string;}|{[Symbol.toPrimitive](hint:"string"):string;},)=>void,)=>void);

Defines the compression algorithm or function to use. Defaults togzip.

Note

If you use a custom function for thealgorithm option, the default value ofcompressionOptions will be an empty object{}.

`string`

The algorithm is based on the Node.jszlib module.

webpack.config.js

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

`function`

Allow you to specify a custom compression function.

webpack.config.js

module.exports={plugins:[newCompressionPlugin({algorithm(input,compressionOptions,callback){returncompressionFunction(input,compressionOptions,callback);},}),],};

`compressionOptions`

Type:

interfacecompressionOptions{flush?:number;finishFlush?:number;chunkSize?:number;windowBits?:number;level?:number;memLevel?:number;strategy?:number;dictionary?:Buffer|TypedArray|DataView|ArrayBuffer;info?:boolean;maxOutputLength?:number;}

Default:{ level: 9 }

Compression options foralgorithm.

You can find all available options in thezlib documentation.

Note

If you use a custom function for thealgorithm option, the default value ofcompressionOptions will be an empty object{}.

webpack.config.js

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

`threshold`

Type:

typethreshold=number;

Default:0

Only assets larger than this size (in bytes) are processed.

webpack.config.js

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

`minRatio`

Type:

typeminRatio=number;

Default:0.8

Only assets that compress better than this ratio are processed (minRatio = Compressed Size / Original Size).For example, if you have aimage.png file with a size of 1024 bytes, and its compressed version is of 768 bytes, theminRatio is0.75.In other words, assets will be processed only when the ratio ofCompressed Size / Original Size is less than the specifiedminRatio.

You can use a value of1 to process assets that are smaller than or equal to the original size.

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

Use a value ofNumber.MAX_SAFE_INTEGER to process all assets even if they are larger than the original size, excluding assets with their original size is0 bytes.

webpack.config.js

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

`filename`

Type:

typefilename=string|((pathdata:PathData)=>string);

Default:"[path][base].gz"

The target asset filename.

`string`

For example, given an asset path:assets/images/image.png?foo=bar#hash:

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

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

[base] is replaced with the base name ([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, including the. (.png).

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

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

webpack.config.js

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

`function`

webpack.config.js

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

`deleteOriginalAssets`

Type:

typedeleteOriginalAssets=|boolean|"keep-source-map"|((name:string)=>boolean);

Default:false

Determines whether the original (uncompressed) assets should be deleted after compression.

If set totrue , all original assets will be deleted.
If set to"keep-source-map", all original assets except source maps (.map files) will be deleted.
If a function is provided, it will be called with each asset’s name and should returntrue to delete the asset orfalse to keep it.

Example:

module.exports={plugins:[newCompressionPlugin({deleteOriginalAssets:(assetName)=>// Delete all assets except images!assetName.endsWith(".png")&&!assetName.endsWith(".jpg"),}),],};

webpack.config.js

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

To exclude sourcemaps from compression:

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

Using a custom function:

module.exports={plugins:[newCompressionPlugin({exclude:/.map$/,deleteOriginalAssets:(name)=>{if(/\.js$/.test(name)){returnfalse;}returntrue;},}),],};

Examples

Using Zopfli

Prepare compressed versions of assets using thezopfli library.

Note

@gfx/zopfli requires at leastNode.js version8.

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

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

webpack.config.js

constzopfli=require("@gfx/zopfli");module.exports={plugins:[newCompressionPlugin({compressionOptions:{numiterations:15,},algorithm(input,compressionOptions,callback){returnzopfli.gzip(input,compressionOptions,callback);},}),],};

Using Brotli

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

Node.js v10.16.0 and later includesnative support for Brotli compression in itszlib module.

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

webpack.config.js

constzlib=require("node:zlib");module.exports={plugins:[newCompressionPlugin({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’sBROTLI_PARAM_QUALITY option is functionally equivalent to zlib’slevel option.You can find all Brotli’s options inthe relevant part of the zlib module documentation.

Using Zstandard

Zstandard (zstd) is a fast lossless compression algorithm, targeting real-time compression scenarios at zlib-level and better compression ratios.

Node.js 22.15.0 and later includesnative support for Zstandard compression in itszlib module.

You can take advantage of this built-in support for zstd in Node 22.15.0 and later by just passing in the appropriatealgorithm to the CompressionPlugin:

webpack.config.js

constzlib=require("node:zlib");module.exports={plugins:[newCompressionPlugin({filename:"[path][base].zst",algorithm:"zstdCompress",test:/\.(js|css|html|svg)$/,compressionOptions:{params:{[zlib.constants.ZSTD_c_compressionLevel]:10,},},threshold:10240,minRatio:0.8,deleteOriginalAssets:false,}),],};

You can find all Zstandard's options inthe relevant part of the zlib module documentation.

Multiple compressed versions of assets for different algorithm

webpack.config.js

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