压缩- webpack- 插件

编制资产压缩版本,以提供内容编码服务.

开始

开始,你需要安装 compression-webpack-plugin数字 :

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

然后将插件添加到您的 webpack 相会. 例如:

网络包装. config.js

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [new CompressionPlugin()],
};

跑开 webpack 通过你喜欢的方法.

选项

test

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

包括所有通过测试断言的资产.

网络包装. config.js

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

include

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

包括符合上述任何条件的所有资产.

网络包装. config.js

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

exclude

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

不包括符合上述任何条件的所有资产.

网络包装. config.js

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

algorithm

类型 : String|Function 默认 : gzip

压缩算法/函数 .

String

算法从 兹利布。 。 。 .

网络包装. config.js

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip',
    }),
  ],
};

Function

允许指定自定义压缩函数 .

网络包装. config.js

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm(input, compressionOptions, callback) {
        return compressionFunction(input, compressionOptions, callback);
      },
    }),
  ],
};

compressionOptions

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

压缩选项 algorithm。 。 。 .

如果您使用自定义函数 algorithm 选项,默认值为 {}。 。 。 .

您可以在这里找到所有选项 兹利布。 。 。 .

网络包装. config.js

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

threshold

类型 : Number 默认 : 0

只处理规模大于此规模的资产. 以字节表示.

网络包装. config.js

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

minRatio

类型 : Number 默认 : 0.8

只有压缩优于这一比率的资产才得到处理(minRatio = Compressed Size / Original Size) (中文(简体) ). 示例:你有 image.png 文件有1024b大小,文件的压缩版本有768b大小,所以 minRatio 等号 0.75。 。 。 . 换言之,资产将在 Compressed Size / Original Size 减值 minRatio 数值. 你用得着 1 用于处理小于原资产的价值。 使用数字值 。 MAXQSAFE INTEGER 处理所有资产, 即使它们比原始资产大( 当您为 AWS 预吞所有资产时有用)

网络包装. config.js

module.exports = {
  plugins: [
    new CompressionPlugin({
      minRatio: 0.8,
    }),
  ],
};

filename

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

目标资产文件名 .

String

[file] 替换为原始资产文件名. [path] 替换为原始资产的路径. [dir] 替换为原始资产的目录. [name] 替换为原始资产的文件名. [ext] 改为原始资产的扩展. [query] 改为查询.

网络包装. config.js

module.exports = {
  plugins: [
    new CompressionPlugin({
      filename: '[path].gz[query]',
    }),
  ],
};

Function

网络包装. config.js

module.exports = {
  plugins: [
    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}`;
      },
    }),
  ],
};

deleteOriginalAssets

类型 : Boolean 默认 : false

是否删除原始资产.

网络包装. config.js

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

cache

在网络包装5中被忽略了! 请使用 https://webpack.js.org/configulation/other-options/#cache 页面存档备份,存于互联网档案馆。 。 。 .

类型 : Boolean|String 默认 : true

启用文件缓存 . 缓存目录的默认路径 : node_modules/.cache/compression-webpack-plugin。 。 。 .

Boolean

启用/ 禁用文件缓存 .

网络包装. config.js

module.exports = {
  plugins: [
    new CompressionPlugin({
      cache: true,
    }),
  ],
};

String

启用文件缓存并设置缓存目录的路径 .

网络包装. config.js

module.exports = {
  plugins: [
    new CompressionPlugin({
      cache: 'path/to/cache',
    }),
  ],
};

实例

使用 Zopfli

使用 zopfli 图书馆.

i @gfx/zopfli 需要最小 8 版本 node。 。 。 .

开始,你需要安装 @gfx/zopfli数字 :

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

网络包装. 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 软件

布罗特利 是一种由Google最初开发的压缩算法,提供比gzip优越的压缩.

节点10.1.6分,后来为 本地支助 在它的zlib模块中为Brotli压缩.

我们可以利用这种对布罗特利的内在支持 在Node 10.16.0 稍后,只是通过在适当的 algorithm 到压缩插件 :

网络包装. config.js

const zlib = require('zlib');

module.exports = {
  plugins: [
    new CompressionPlugin({
      filename: '[path].br[query]',
      algorithm: 'brotliCompress',
      test: /\.(js|css|html|svg)$/,
      compressionOptions: {
        // zlib’s `level` option matches Brotli’s `BROTLI_PARAM_QUALITY` option.
        level: 11,
      },
      threshold: 10240,
      minRatio: 0.8,
      deleteOriginalAssets: false,
    }),
  ],
};

说明 这个 level 选项匹配 BROTLI_PARAM_QUALITY 用于基于 Brotli 的流

用于不同算法的多个资产压缩版本

网络包装. config.js

const zlib = require('zlib');

module.exports = {
  plugins: [
    new CompressionPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8,
    }),
    new CompressionPlugin({
      filename: '[path].br[query]',
      algorithm: 'brotliCompress',
      test: /\.(js|css|html|svg)$/,
      compressionOptions: {
        level: 11,
      },
      threshold: 10240,
      minRatio: 0.8,
    }),
  ],
};

捐款

请花点时间来读一下我们的贡献准则 如果你还没有这样做.

捐款

许可证

麻省理工学院