feat(@angular/cli): add --compress option

[cherryland]

By default, gzip compression is enabled in production mode. There are several use cases, where gzip compression might not be supported and/or required

• Environments where gzip compression is not required
  • App frameworks using native WebViews (eg. Apache Cordova, Phonegap)
  • Web Extensions (eg. Mozilla Firefox, Google Chrome and Microsoft Edge)
• Environments where a server-side compression method is preferred

Usage

$ ng build --prod --compress=false

or

$ ng serve --prod --compress=false

Example Output

$ ng --help
ng build <options...>
  Builds your app and places it into the output path (dist/ by default).
  aliases: b
  --target (String) (Default: development)
    aliases: -t <value>, -dev (--target=development), -prod (--target=production)
  ...
  --compress (Boolean) (Default: true) use gzip compression in production mode
  ...

Basic Implementation

We simply wrap the plugin with a conditional operator and void the output, if the expression evaluates to false

  plugins: [
    ...
    buildOptions.compress ? new CompressionPlugin({...}) : (): void => null
  ]

This is perfectly fine, since Webpack installs a plugin by calling its apply method, passing a reference to the Webpack compiler object.

Related Issues

• feat(build): add gzip to serve --prod #2621 (comment)
• add webpack-dev-server gzip support #2028

Related Pull Requests

• feat(build): add gzip to serve --prod #2621

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.

---

• If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address. Check your existing CLA data and verify that your email is set on your git commits.
• If you signed the CLA as a corporation, please let us know the company's name.

[cherryland]

Awaiting #4596 to add e2e end-to-end tests

[googlebot]

CLAs look good, thanks!

[clydin]

It would be cleaner if a check was done above for buildOptions.compress and then the plugin was added onto extraPlugins. This should probably be moved into common instead if it's now configurable or a warning issued if it is only supported for production.

@filipesilva thoughts on this?

[clydin]

This should just be serveTaskOptions.compress once the option default is based on build target.

[cherryland]

We need to make sure, that the compress option will only be available in combination with -t production, but this behavior can be changed in general

@filipesilva

[clydin]

The default here can be removed as it can be set based on build target. This can be done by adding the option values here: https://github.com/angular/angular-cli/blob/master/packages/%40angular/cli/models/webpack-config.ts#L79

[cherryland]

This can be done by adding the option values here: https://github.com/angular/angular-cli/blob/master/packages/%40angular/cli/models/webpack-config.ts#L79

It already is

The default here can be removed

I disagree, the default value may be redundant here, but is also included in the CLI help output

[clydin]

Except the default is false for the development target which makes it misleading in its current form. I know it says production in the description but even a small amount of ambiguity can lead to confusion.

Either way, help should eventually support displaying target specific defaults.

[cherryland]

The option will be ignored when -t=development, see https://github.com/angular/angular-cli/blob/master/packages/%40angular/cli/models/webpack-config.ts#L59

[hansl]

Hi @0xcherry,

After an offline discussion here with the team we decided to remove the compression plugin entirely. The reasoning is that there is an easy workaround, it's noise and the service worker is buggy with it.

Could you transform this PR with:

1. remove compression plugin on production builds all the time,
2. add a documentation to /doc/documentation explaining how to compress the files, in case users miss the functionality, and
3. add a BREAKING CHANGE section to your commit message explaining that those files are not outputted anymore.

If you need any help with the above steps let me know.

Cheers!

[hansl]

See above.

[filipesilva]

Superseded by #4702

[iamdenny]

I can't find compress doc in https://github.com/angular/angular-cli/tree/master/docs/documentation
please let me where it is.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}