custom webpack config with compression-webpack-plugin only compress es2015

Describe the Bug

I believe there are so many people want to use compression-webpack-plugin to compress the generated js file and use it with static_gzip of nginx, and I’m one of these people.

I’ve used this great package for years, today I suddenly found that with angular 8.2, compression-webpack-plugin only compress the es2015 version of js files, the es-5 version is left uncompressed.

Minimal Reproduction

normal config like the readme, and here is my extra-webpack.config.js

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

module.exports = (config, options) => {

  // compress everything for nginx static_gzip
  config.plugins.push(
    new CompressionPlugin({
      test: /\.(js|css|svg|woff|woff2)$/,
      compressionOptions: { threshold: 8192, level: 9}
    })
  );

  return config;
};

with this simple config, the compress-plugin will only compress es2015 version.

Expected Behavior

should able to compress both es2015 and es-5 version of js.

Screenshots

Environment

Libs
- @angular/core version: 8.2.14
- @angular-devkit/build-angular version: 0.803.19
- @angular-builders/custom-webpack version: 8.3.0

For Tooling issues:
- Node version: v10.17.0
- Platform:  only tested on Mac/Linux

[arturovt]

Seems like it’s an Angular’s issue. Compression plugin “subscribes” on the emit hook and then runs compressions on files:

compiler.hooks.emit.tapAsync({
    name: 'CompressionPlugin'
}, (compilation, callback) => {
    console.log(Object.keys(compilation.assets));
})

All files are present except of main-es5 🤔

I guess it’s related to that differential loading process, emit hook is tapped right before assets are emitted to the dist folder, but the generation of ES5 bundles is started after that, you can open dist/project_name/static/assets and see that es-2015.js.gz files are emitted before es-5.js are generated.

I’m not a fan of that solution but you could try it as a temporary workaround. You could run gzip right after build command, like:

npm run build && gzip -rk9 dist

Same with brotli after installing brotli CLI.

[steve-todorov]

Sure, here’s the repo. This is just the hello world from the latest Angular 8 with some minor tweaks. When you run npm run build it should produce the mentioned issue. I’ve attached a screenshot and If you pay close attention to the *-es5-* assets you’ll see they have not been compressed. For example main-es5.e14fa0110cab463626ac.js. You can also check the assets-manifest.json which should have the es5 assets included, but does not. This is why I thought the es5 differential assets are actually generated after the entire build - maybe something like the index.html file.