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

Answer 2

You could achieve this with a simple bash script before transferring them to the server, or even adding it to package.json as a command

 "scripts": {
   "build.prod": "ng build --environment=prod && tar -zcvf archive.tar.gz dist/prod/*",

Not sure what's your folder structure, but you can play around with tar -zcvf archive.tar.gz dist/prod/* in the terminal until you find paths that suite to your needs.

EDIT: Seems I misunderstood the question, if it is about bundle size when serving the stuff to the end user, you should take a look at AOT + Rollup to minimize your bundle sizes. And enable gzip compression on your webserver when serving files (probably most servers have it enabled already).

Answer 3

My understanding is that the cli team removed the .gz compression option because most servers will compress files automatically before serving them to the browser (as long as the browser supports compressed responses - which most do).

Answer 4

I have found more simple solution to solve this issue. Try this:

npm i --save-dev gzipper

and in your angular-cli.json just add this gzipper --verbose ./dist to your build command like:

ng build && gzipper --verbose ./dist

Answer 5

I think you need to enable gzip encoding on your api. This way, the client will ask for compressed resources from the server.