how to enable gzip compression in angular cli for production build

Question

I would want to compress the bundle files that are created when building the angular project. I use ng build --environment=${environment} to build the application currently and the version of "@angular/compiler-cli": "^4.0.0" do not generate the .gz files to the dist folder. What is the simplest way to generate .gz bundle files (preferable without touching webpack.config.js file)? PS: I knew the option for creating the .gz files was removed by the angular/cli team sometime back. But I need that desperately as my bundle files are huge.

Answer 1

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

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"
       ...
   }