webpack配置gzip

webpack配置gzip by niuzhiyong

1、先安装webpack插件

npm i compression-webpack-plugin@1.1.12

github地址：compression-webpack-plugin

注意：如果打包报错：Cannot read property 'emit' of undefined ， 说明是由于这个插件的版本太高导致的，所以要指定1.1.12版本

2、配置信息和用法

1.参数选项：

Name	类型	默认	描述
test	RegExp	.	所有匹配此RegExp的资产都会被处理
asset	String	[path].gz[query]	目标资产名称。文件被替换为原始资产。路径将替换为原始资产的路径并使用查询进行查询
algorithm	String\Function	gzip	允许自定义压缩函数 ，或者如果使用了{String}，则该算法取自zlib
threshold	Number	0	只处理大于此大小的文件。以字节为单位
minRatio	Number	0.8	只有压缩好这个比率的文件才能被处理
deleteOriginalAssets	Boolean	false	是否删除压缩成gzip格式之前的文件

2.用法：

const CompressionPlugin = require("compression-webpack-plugin")

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

3.结合到项目中

// 开启gzip压缩，
const CompressionPlugin = require('compression-webpack-plugin');

const webpackConfigDev = {
  plugins: [
    // ... 省略
    new CompressionPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.js$|\.html$|\.css$/, // 匹配文件名
      threshold: 10240, // 对超过10k的数据压缩
      minRatio: 0.8, // 压缩比率
      deleteOriginalAssets: false, // 不删除源文件
    }),
   // ... 省略
  ],
};

结果如图：

注意：要服务器开启gzip之后，才能访问xxx.css.gz文件