Skip to content

Commit 23dd998

Browse files
evilebottnawievilebottnawi
authored
docs: update (#157)
1 parent 1a0a4ad commit 23dd998

File tree

1 file changed

+137
-67
lines changed

1 file changed

+137
-67
lines changed

‎README.md‎

Lines changed: 137 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,16 @@ Default: `undefined`
4747

4848
Test to match files against.
4949

50+
**webpack.config.js**
51+
5052
```js
51-
// in your webpack.config.js
52-
new CompressionPlugin({
53-
test: /\.js(\?.*)?$/i,
54-
});
53+
module.exports = {
54+
plugins: [
55+
new CompressionPlugin({
56+
test: /\.js(\?.*)?$/i,
57+
}),
58+
],
59+
};
5560
```
5661

5762
### `include`
@@ -61,11 +66,16 @@ Default: `undefined`
6166

6267
Files to include.
6368

69+
**webpack.config.js**
70+
6471
```js
65-
// in your webpack.config.js
66-
new CompressionPlugin({
67-
include: /\/includes/,
68-
});
72+
module.exports = {
73+
plugins: [
74+
new CompressionPlugin({
75+
include: /\/includes/,
76+
}),
77+
],
78+
};
6979
```
7080

7181
### `exclude`
@@ -75,11 +85,16 @@ Default: `undefined`
7585

7686
Files to exclude.
7787

88+
**webpack.config.js**
89+
7890
```js
79-
// in your webpack.config.js
80-
new CompressionPlugin({
81-
exclude: /\/excludes/,
82-
});
91+
module.exports = {
92+
plugins: [
93+
new CompressionPlugin({
94+
exclude: /\/excludes/,
95+
}),
96+
],
97+
};
8398
```
8499

85100
### `cache`
@@ -94,22 +109,32 @@ The default path to cache directory: `node_modules/.cache/compression-webpack-pl
94109

95110
Enable/disable file caching.
96111

112+
**webpack.config.js**
113+
97114
```js
98-
// in your webpack.config.js
99-
new CompressionPlugin({
100-
cache: true,
101-
});
115+
module.exports = {
116+
plugins: [
117+
new CompressionPlugin({
118+
cache: true,
119+
}),
120+
],
121+
};
102122
```
103123

104124
#### `String`
105125

106126
Enable file caching and set path to cache directory.
107127

128+
**webpack.config.js**
129+
108130
```js
109-
// in your webpack.config.js
110-
new CompressionPlugin({
111-
cache: 'path/to/cache',
112-
});
131+
module.exports = {
132+
plugins: [
133+
new CompressionPlugin({
134+
cache: 'path/to/cache',
135+
}),
136+
],
137+
};
113138
```
114139

115140
### `filename`
@@ -128,29 +153,35 @@ The target asset filename.
128153
`[ext]` is replaced with the extension of the original asset.
129154
`[query]` is replaced with the query.
130155

156+
**webpack.config.js**
157+
131158
```js
132-
// in your webpack.config.js
133-
new CompressionPlugin({
134-
filename: '[path].gz[query]',
135-
});
136-
137-
new CompressionPlugin({
138-
filename: '[dir][name].gz[ext][query]',
139-
});
159+
module.exports = {
160+
plugins: [
161+
new CompressionPlugin({
162+
filename: '[path].gz[query]',
163+
}),
164+
],
165+
};
140166
```
141167

142168
#### `Function`
143169

170+
**webpack.config.js**
171+
144172
```js
145-
// in your webpack.config.js
146-
new CompressionPlugin({
147-
filename(info) {
148-
// info.file is the original asset filename
149-
// info.path is the path of the original asset
150-
// info.query is the query
151-
return `${info.path}.gz${info.query}`;
152-
},
153-
});
173+
module.exports = {
174+
plugins: [
175+
new CompressionPlugin({
176+
filename(info) {
177+
// info.file is the original asset filename
178+
// info.path is the path of the original asset
179+
// info.query is the query
180+
return `${info.path}.gz${info.query}`;
181+
},
182+
}),
183+
],
184+
};
154185
```
155186

156187
### `algorithm`
@@ -164,24 +195,34 @@ The compression algorithm/function.
164195

165196
The algorithm is taken from [zlib](https://nodejs.org/api/zlib.html).
166197

198+
**webpack.config.js**
199+
167200
```js
168-
// in your webpack.config.js
169-
new CompressionPlugin({
170-
algorithm: 'gzip',
171-
});
201+
module.exports = {
202+
plugins: [
203+
new CompressionPlugin({
204+
algorithm: 'gzip',
205+
}),
206+
],
207+
};
172208
```
173209

174210
#### `Function`
175211

176212
Allow to specify a custom compression function.
177213

214+
**webpack.config.js**
215+
178216
```js
179-
// in your webpack.config.js
180-
new CompressionPlugin({
181-
algorithm(input, compressionOptions, callback) {
182-
return compressionFunction(input, compressionOptions, callback);
183-
},
184-
});
217+
module.exports = {
218+
plugins: [
219+
new CompressionPlugin({
220+
algorithm(input, compressionOptions, callback) {
221+
return compressionFunction(input, compressionOptions, callback);
222+
},
223+
}),
224+
],
225+
};
185226
```
186227

187228
### `compressionOptions`
@@ -194,11 +235,16 @@ If you use custom function for the `algorithm` option, the default value is `{}`
194235
Compression options.
195236
You can find all options here [zlib](https://nodejs.org/api/zlib.html#zlib_class_options).
196237

238+
**webpack.config.js**
239+
197240
```js
198-
// in your webpack.config.js
199-
new CompressionPlugin({
200-
compressionOptions: { level: 1 },
201-
});
241+
module.exports = {
242+
plugins: [
243+
new CompressionPlugin({
244+
compressionOptions: { level: 1 },
245+
}),
246+
],
247+
};
202248
```
203249

204250
### `threshold`
@@ -208,11 +254,16 @@ Default: `0`
208254

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

257+
**webpack.config.js**
258+
211259
```js
212-
// in your webpack.config.js
213-
new CompressionPlugin({
214-
threshold: 8192,
215-
});
260+
module.exports = {
261+
plugins: [
262+
new CompressionPlugin({
263+
threshold: 8192,
264+
}),
265+
],
266+
};
216267
```
217268

218269
### `minRatio`
@@ -225,11 +276,16 @@ Example: you have `image.png` file with 1024b size, compressed version of file h
225276
In other words assets will be processed when the `Compressed Size / Original Size` value less `minRatio` value.
226277
You can use `1` value to process assets that are smaller than the original. Use a value of Number.MAX_SAFE_INTEGER to process all assets even if they are larger than the original (useful when you are pre-zipping all assets for AWS)
227278

279+
**webpack.config.js**
280+
228281
```js
229-
// in your webpack.config.js
230-
new CompressionPlugin({
231-
minRatio: 0.8,
232-
});
282+
module.exports = {
283+
plugins: [
284+
new CompressionPlugin({
285+
minRatio: 0.8,
286+
}),
287+
],
288+
};
233289
```
234290

235291
### `deleteOriginalAssets`
@@ -239,11 +295,16 @@ Default: `false`
239295

240296
Whether to delete the original assets or not.
241297

298+
**webpack.config.js**
299+
242300
```js
243-
// in your webpack.config.js
244-
new CompressionPlugin({
245-
deleteOriginalAssets: true,
246-
});
301+
module.exports = {
302+
plugins: [
303+
new CompressionPlugin({
304+
deleteOriginalAssets: true,
305+
}),
306+
],
307+
};
247308
```
248309

249310
## Examples
@@ -283,20 +344,25 @@ module.exports = {
283344

284345
[Brotli](https://en.wikipedia.org/wiki/Brotli) is a compression algorithm originally developed by Google, and offers compression superior to gzip.
285346

286-
Node 11.7.0 and later has [native support](https://nodejs.org/api/zlib.html#zlib_zlib_createbrotlicompress_options) for Brotli compression in its zlib module.
347+
Node 10.16.0 and later has [native support](https://nodejs.org/api/zlib.html#zlib_zlib_createbrotlicompress_options) for Brotli compression in its zlib module.
287348

288349
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:
289350

290351
**webpack.config.js**
291352

292353
```js
354+
const zlib = require('zlib');
355+
293356
module.exports = {
294357
plugins: [
295358
new CompressionPlugin({
296359
filename: '[path].br[query]',
297360
algorithm: 'brotliCompress',
298361
test: /\.(js|css|html|svg)$/,
299-
compressionOptions: { level: 11 },
362+
compressionOptions: {
363+
// zlib’s `level` option matches Brotli’s `BROTLI_PARAM_QUALITY` option.
364+
level: 11,
365+
},
300366
threshold: 10240,
301367
minRatio: 0.8,
302368
deleteOriginalAssets: false,
@@ -305,13 +371,15 @@ module.exports = {
305371
};
306372
```
307373

308-
**N.B.:** The `level` option matches `BROTLI_PARAM_QUALITY` [for Brotli-based streams](https://nodejs.org/api/zlib.html#zlib_for_brotli_based_streams)
374+
**Note** The `level` option matches `BROTLI_PARAM_QUALITY` [for Brotli-based streams](https://nodejs.org/api/zlib.html#zlib_for_brotli_based_streams)
309375

310376
### Multiple compressed versions of assets for different algorithm
311377

312378
**webpack.config.js**
313379

314380
```js
381+
const zlib = require('zlib');
382+
315383
module.exports = {
316384
plugins: [
317385
new CompressionPlugin({
@@ -325,7 +393,9 @@ module.exports = {
325393
filename: '[path].br[query]',
326394
algorithm: 'brotliCompress',
327395
test: /\.(js|css|html|svg)$/,
328-
compressionOptions: { level: 11 },
396+
compressionOptions: {
397+
level: 11,
398+
},
329399
threshold: 10240,
330400
minRatio: 0.8,
331401
}),

0 commit comments

Comments
 (0)