Feature Request: Analyze gzipped bundles

Issue description

webpack-bundle-analyzer currently displays a blank page when a webpack build uses compression-webpack-plugin to compress bundles.

Technical info

Using the following workaround. This skips compression when webpack build command is used with ‘analyze’ environment variable.

module.exports = ({ env, analyze }) => {
  switch (env) {
    case 'development':
      return merge(commonConfig, developmentConfig);
    case 'production':
      if (analyze) commonConfig.plugins.push(new BundleAnalyzerPlugin());
      else
        productionConfig.plugins.push(
          new CompressionPlugin({
            filename: '[path].gz',
            algorithm: 'gzip',
            test: /\.(js|jsx|css|html|png|svg|jpg|gif)$/,
            threshold: 10240,
            minRatio: 0.8,
            deleteOriginalAssets: true,
          })
        );
      return merge(commonConfig, productionConfig);
    default:
      throw new Error('No matching configuration was found!');
  }
};

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
    Memory: 8.06 GB / 15.81 GB
  Binaries:
    Node: 12.18.1 - ~\Apps\Node\node.EXE
    npm: 6.14.5 - ~\Apps\Node\npm.CMD
  npmPackages:
    clean-webpack-plugin: ^3.0.0 => 3.0.0 
    compression-webpack-plugin: ^4.0.1 => 4.0.1 
    html-webpack-plugin: ^4.3.0 => 4.3.0 
    optimize-css-assets-webpack-plugin: ^5.0.3 => 5.0.3 
    webpack: ^4.44.1 => 4.44.1 
    webpack-bundle-analyzer: ^3.8.0 => 3.8.0 
    webpack-cli: ^3.3.12 => 3.3.12 
    webpack-dev-server: ^3.11.0 => 3.11.0 
    webpack-merge: ^5.1.1 => 5.1.1 

Debug info

How do you use this module? As CLI utility or as plugin? -Both

If CLI, what command was used? (e.g. webpack-bundle-analyzer -O path/to/stats.json)

If plugin, what options were provided? (e.g. new BundleAnalyzerPlugin({ analyzerMode: 'disabled', generateStatsFile: true })) new BundleAnalyzerPlugin()

What other Webpack plugins were used? clean-webpack-plugin: ^3.0.0 => 3.0.0 compression-webpack-plugin: ^4.0.1 => 4.0.1 html-webpack-plugin: ^4.3.0 => 4.3.0 optimize-css-assets-webpack-plugin: ^5.0.3 => 5.0.3 webpack: ^4.44.1 => 4.44.1 webpack-bundle-analyzer: ^3.8.0 => 3.8.0 webpack-cli: ^3.3.12 => 3.3.12 webpack-dev-server: ^3.11.0 => 3.11.0 webpack-merge: ^5.1.1 => 5.1.1

[grug]

For the time being I’ve just had to run a separate build and pass in a “isStatsBuild” parameter to webpack to omit the compression. It works - not ideal, though.

[xitter]

@RedVelocity @valscion Brotli also worked well as zlib supports it, PR on the way.

Config for brotli:

new CompressionPlugin({
  filename: '[path].br',
  algorithm: 'brotliCompress',
  test: /\.(js|jsx|css|html|png|svg|jpg|gif)$/,
  compressionOptions: {
     // zlib’s `level` option matches Brotli’s `BROTLI_PARAM_QUALITY` option.
     level: 11,
  },
  threshold: 10240,
  minRatio: 0.8,
  deleteOriginalAssets: true,
});