how to enable gzip compression in angular cli for production build

Angular-cli team has removed the support for generating compress files (.gz). Github discussion url.

We can use a gulp task for it.
Install following npm modules:

$npm install --save-dev gulp
$npm install --save-dev gulp-gzip

Create gulpfile.js. The file name has to be gulpfile.js not any other names.

var gulp = require('gulp');
var gzip = require('gulp-gzip');

gulp.task('compress', function() {
  return gulp.src(['./dist/**/*.*'])
      .pipe(gzip())
      .pipe(gulp.dest('./dist'));
});

Since .gz support can be configure in web servers but server has to do the zipping it self and expense some cpu cycles for it. If we pre build it then it helps server to save some cpu cycles. 🙂

We can add it in package.json as script to run after each build of application.

"scripts": {
       ...
       "postbuild": "gulp compress"
       ...
   }