Create-react-app: Creating Gzip files while build

[Ayc0]

With the current config of CRA when you build the project, the files aren't gzipped so if you want to serve gzipped files, you have to either gzipped dynamically or to eject.

What could be awesome is when a build is run, two folders are created in the build folder: one regular and one with the gzipped files. Or having the possibility to set a env var GZIP and build only one folder, gzipped or not

[miraage]

I'd also vote for this feature because GZip files have already been creating for the size difference.
Just save them as well as regular files.
Also Nginx supports .gz files via gzip_static on; directive.

[Ayc0]

I thought about the api:

• You set an env variable gzip to true
• Produces regular files plus the .gz ones

[bogdan-calapod]

I don't feel like this is in the scope of CRA - isn't the web server's job to gzip assets before sending them to the browser ?

[miraage]

@bogdan-calapod take a glance at https://github.com/facebookincubator/create-react-app/blob/v1.0.13/packages/react-dev-utils/FileSizeReporter.js#L128

This function is invoked during the build. It's using zlib.gzipSync method: https://nodejs.org/dist/latest/docs/api/zlib.html#zlib_zlib_gzipsync_buffer_options

It's already happening. All they need is to dump this files to the disk.

[Ayc0]

And if it is the web server that gzip the assets, it is done dynamically, so you have to regzip your assets every time (Nginx has a cache but that's not the point)

[Gandem]

Gzipping files is usually done by the CI / manually.

By default, static web servers do not handle statically gzipped files (need extra configuration). I'm guessing that people needing to statically gzip thebuild folder already do that in their deployment process (and it's quite easy to gzip files in a terminal).

It's a cool feature to have, but it doesn't feel in CRA's scope.

[Timer]

I'm pretty sure this is most often handled by the web server, e.g. express has a gzip option, and I'm sure nginx has an option for this too.

I'm not sure I see the value in us providing these by default.

Let me know if I'm wrong.

Also, I feel like this is easily accomplished with a postbuild script that gzips your assets.

[ghost]

Since you think it is out of scope of CRA, can you suggest an npm package that runs as "post-build" or a "deploy" script and gzip all my "build/" files?

I'm on Windows, Linux, Mac machines (everytime changes).

[Gandem]

Hey @johnunclesam ! If you're searching for a cli gzip utility in Node, any wrapper cli using zlib will do the job. For example : https://www.npmjs.com/package/gzip-all

[Deepankar01]

in case anyone is looking how to do it in nginx
_i know this is not the correct place but this is the first link on googling_
can add or change stuff accordingly. so no need to do anything in CRA just dump your build in the nginx public folder with these configurations

for configurations can go to nginx docs can read this link further
https://www.digitalocean.com/community/tutorials/how-to-add-the-gzip-module-to-nginx-on-ubuntu-14-04

    gzip on;
    gzip_disable "msie6";

    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types text/plain image/svg+xml image/gif image/jpeg image/png application/font-woff text/css application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;