CompressionWebpackPlugin
准备资产的压缩版本，以通过内容编码提供它们。
入门
首先，你需要安装 compression-webpack-plugin
npm install compression-webpack-plugin --save-dev
或
yarn add -D compression-webpack-plugin
或
pnpm add -D compression-webpack-plugin
然后将插件添加到你的 webpack 配置中。例如
webpack.config.js
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
plugins: [new CompressionPlugin()],
};并通过你首选的方法运行 webpack。
选项
test
类型
type test = string | RegExp | Array<string | RegExp>;默认值：undefined
包括通过测试断言的所有资产。
webpack.config.js
module.exports = {
plugins: [
new CompressionPlugin({
test: /\.js(\?.*)?$/i,
}),
],
};include
类型
type include = string | RegExp | Array<string | RegExp>;默认值：undefined
包括与这些条件中的任何一个匹配的所有资产。
webpack.config.js
module.exports = {
plugins: [
new CompressionPlugin({
include: /\/includes/,
}),
],
};exclude
类型
type exclude = string | RegExp | Array<string | RegExp>;默认值：undefined
排除与这些条件中的任何一个匹配的所有资产。
webpack.config.js
module.exports = {
plugins: [
new CompressionPlugin({
exclude: /\/excludes/,
}),
],
};algorithm
类型
type algorithm =
| string
| ((
input: Buffer,
options: CompressionOptions,
callback: (
error: Error | null | undefined,
result:
| string
| ArrayBuffer
| SharedArrayBuffer
| Uint8Array
| readonly number[]
| {
valueOf(): ArrayBuffer | SharedArrayBuffer;
}
| {
valueOf(): string | Uint8Array | readonly number[];
}
| {
valueOf(): string;
}
| {
[Symbol.toPrimitive](hint:%20%22string%22): string;
},
) => void,
) => any);默认值：gzip
压缩算法/函数。
注意
如果你为
algorithm选项使用自定义函数，则compressionOptions选项的默认值为{}。
string
算法来自 zlib。
webpack.config.js
module.exports = {
plugins: [
new CompressionPlugin({
algorithm: "gzip",
}),
],
};function
允许指定自定义压缩函数。
webpack.config.js
module.exports = {
plugins: [
new CompressionPlugin({
algorithm(input, compressionOptions, callback) {
return compressionFunction(input, compressionOptions, callback);
},
}),
],
};compressionOptions
类型
type compressionOptions = {
flush?: number;
finishFlush?: number;
chunkSize?: number;
windowBits?: number;
level?: number;
memLevel?: number;
strategy?: number;
dictionary?: Buffer | TypedArray | DataView | ArrayBuffer;
info?: boolean;
maxOutputLength?: number;
};默认值：{ level: 9 }
algorithm 的压缩选项。
您可以在此处找到所有选项 zlib。
注意
如果您对
algorithm选项使用自定义函数，则默认值为{}。
webpack.config.js
module.exports = {
plugins: [
new CompressionPlugin({
compressionOptions: { level: 1 },
}),
],
};threshold
类型
type threshold = number;默认值：0
仅处理大于此大小的资产。以字节为单位。
webpack.config.js
module.exports = {
plugins: [
new CompressionPlugin({
threshold: 8192,
}),
],
};minRatio
类型
type minRatio = number;默认值：0.8
仅处理压缩比高于此比率的资产（minRatio = 压缩大小 / 原始大小）。例如：您有一个大小为 1024b 的 image.png 文件，该文件压缩后的版本大小为 768b，因此 minRatio 等于 0.75。换句话说，当 压缩大小 / 原始大小 值小于 minRatio 值时，将处理资产。
您可以使用 1 值来处理小于原始大小的资产。
使用 Infinity 值来处理所有资产，即使它们大于原始大小或其原始大小为 0 字节（在您为 AWS 预压缩所有资产时很有用）。
使用 Number.MAX_SAFE_INTEGER 值来处理所有资产，即使它们大于原始大小，但排除原始大小为 0 字节的资产。
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 filename = string | ((pathdata: PathData) => string);默认值："[path][base].gz"
目标资产文件名。
string
例如，我们有 assets/images/image.png?foo=bar#hash
[path] 被替换为原始资产的目录，包括尾随 /（assets/images/）。
[file] 被替换为原始资产的路径（assets/images/image.png）。
[base] 被替换为原始资产的基准（[name] + [ext]）（image.png）。
[name] 被替换为原始资产的名称（image）。
[ext] 被替换为原始资产的扩展名，包括 .（.png）。
[query] 被替换为原始资产的查询，包括 ?（?foo=bar）。
[fragment] 被替换为原始资产的片段（在 URL 的概念中称为 hash）（#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.filename)) {
return "assets/svg/[path][base].gz";
}
return "assets/js/[path][base].gz";
},
}),
],
};deleteOriginalAssets
类型
type deleteOriginalAssets =
| boolean
| "keep-source-map"
| ((name: string) => boolean);默认值：false
是否删除原始资产。
webpack.config.js
module.exports = {
plugins: [
new CompressionPlugin({
deleteOriginalAssets: true,
}),
],
};从压缩中排除源映射
module.exports = {
plugins: [
new CompressionPlugin({
exclude: /.map$/,
deleteOriginalAssets: "keep-source-map",
}),
],
};使用自定义函数
module.exports = {
plugins: [
new CompressionPlugin({
exclude: /.map$/,
deleteOriginalAssets: (name) => {
if (/\.js$/.test(name)) {
return false;
}
return true;
},
}),
],
};示例
使用 Zopfli
使用 zopfli 库准备资产的压缩版本。
注意
@gfx/zopfli需要node的最低版本为8。
首先，你需要安装 @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 是一种最初由 Google 开发的压缩算法，其压缩效果优于 gzip。
Node 10.16.0 及更高版本在其 zlib 模块中对 Brotli 压缩具有原生支持。
我们可以在 Node 10.16.0 及更高版本中利用对 Brotli 的内置支持，只需将适当的 algorithm 传递给 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,
}),
],
};注意 Brotli 的 BROTLI_PARAM_QUALITY 选项在功能上等同于 zlib 的 level 选项。你可以在zlib 模块文档的相关部分中找到 Brotli 的所有选项。
针对不同算法的资产的多个压缩版本
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,
}),
],
};贡献
如果你还没有阅读我们的贡献指南，请花点时间阅读。