how to enable gzip compression in angular cli for production build

问题

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.

回答1:

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).

回答2:

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() {
  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"
       ...
   }

回答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).