How to compress the files using gzip in react app

Question

I have created a react app using create-react-app. I want to gzip the files during the build.

I expect the files to be gziped

Sunfish

Answer 1

You can run any of the postbuild commands like JackHack has demonstrated. But I would also add the following option to remove the ".gz" extension to keep using the original file names:

"scripts": {
  ...
  "build": "react-scripts build",
  "postbuild": "find /path/to/build/static -type f \\( -name \\*.js -o -name \\*.css \\) -exec gzip {} \\; -exec mv {}.gz {} \\;"
},

Tippett

Note: path can be relative: ./build/static – Skolnik

Answer 2

Easiest way is probably to modify your package.json.

Add a "postbuild" section to the scripts. For example, something like this:

"scripts": {
"build": "YOUR BUILD COMMAND"
"postbuild": "tar -cvzf your_react_app_name.tar.gz /path/to/your/build/artifacts"
}

Post build should run automatically after build runs. If you don't have tar:

"scripts": {
"build": "YOUR BUILD COMMAND"
"postbuild": "cd /path/to/your/build && gzip *.js && gzip *.css"
}

Or using zip:

"scripts": {
"build": "YOUR BUILD COMMAND"
"postbuild": "zip -r your_app.zip /path/to/your/build"
}

Windows powershell:

"scripts": {
"build": "YOUR BUILD COMMAND"
"postbuild": "Compress-Archive -Path C:\path\to\your\build\* -CompressionLevel Optimal -DestinationPath C:\export\path\your_app_name.zip"
}

Tellford

If you don't want them in a tar file you can do gzip *.js && gzip *.css instead. – Tellford

I'm getting this error while running the build, can you please look at it. 'tar' is not recognized as an internal or external command, operable program or batch file. – Sunfish

Hi, I'm getting the same error(not recognized) using the other two commands. I've tried npm install -g gzip and tried but still the same. Is there any other way? (I'm using windows 10 OS and the default CLI) – Sunfish

Are you using powershell or CMD? – Tellford

You can try to install gzip from here gnuwin32.sourceforge.net/packages/gzip.htm – Tellford

I am using CMD in the widows – Sunfish

Do you have gzip installed? If so, you need to enable it in CMD, check this answer: #36733676 If not, please install some compression utility on your machine, such as 7zip (really popular). Alternatively, you could the powershell command (in edit above). – Tellford

Answer 3

The above answers tell you how to simply convert the .js and .css file which were created while Bundling, to .js.gz and .css.gz files. There may be a case you do not want to just convert the files to gzip, but rather serve these .js and .css files as gzipped compressed files. For this you actually don't need to change your code, but you need to do changes in server configuration.

For Example - if your React App is deployed using NGINX server then you can serve your build files in gzipped compressed by adding below configuration :

    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_min_length 0;
    gzip_types text/plain application/javascript text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype;

So your Final Configuration may look like :

server {
    listen 8080;
    server_name  nginx.test.com;

    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_min_length 0;
    gzip_types text/plain application/javascript text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype;

    location / {
        root /data/www;
    }
}

The Explaination for above Properties are:

gzip on: Default config for many Nginx servers. It will enable gzip but ONLY for the MIME type text/html.

gzip_disable “msie6”: Disable gzip for browsers that do not support it — IE4–6

gzip_vary on: Let the browser decide whether it will accept gzip.

gzip_proxied any: enables compression for all proxied requests.

gzip_comp_level: This setting will set the compression level for gzip. The default level is 6 and this should be applied for most use cases.

gzip_buffers: Sets the number and size of buffers used to compress a response.

gzip_http_version: Sets the minimum HTTP version of a request required to compress a response.

gzip_min_length 0: This specifies to only gzip files that are above a certain size in KB.

I stumbled upon this Question but did not get the Solution, so posting the solution which I found and worked for me.

Alpestrine

Thanks for the above answer. helped me a lot. Just want to add one thing here. I was putting the gzip related configurations after the location configuration and it was not working for me. Putting it before the location configuration worked! So make sure the gzip related configurations are put before the location configuration, else the compression does not work. – Alpestrine

Answer 4

Try this. It works for me and hopefully for you as well.

"postbuild": "gzip build/static/js/*.js && gzip build/static/css/*.css"

Hale

My website is showing blank when I add this line to package.json – Psychologist

Answer 5

The other answers are great for many cases, but if you want a lightweight production option and happen to be serving your app through AWS CloudFront, then you can leverage the CloudFront configurations to have CloudFront compress eligible react build files for you.

In the words of the CloudFront AWS docs (as of June 2021):

You can use CloudFront to automatically compress files of certain types and serve the compressed files when viewers support them (viewers indicate their support for compressed files with the Accept-Encoding HTTP header). CloudFront can compress files using the Gzip and Brotli compression formats. When the viewer supports both formats, CloudFront uses Brotli.

I appreciate that it reduces one less thing to manage in my build, but will note that this may not work for all use cases, such as if you're trying to run performance tests, size-validations, etc in a local or pipeline CI/CD environment. Just depends on your needs & infrastructure setup, but if you only need it for production & use CloudFront, then this can reduce some overhead locally.

Note: It seems unlikely that the create-react-app project will add this functionality as a build configuration, since they have already turned down various attempts/requests to support it internally (for instance, Issues #1908 and #3169). Sounds like they expect either post-build scripts or servers to handle compression.

Gasbag

Answer 6

Note if you are compressing manually via package.json's postbuild, you also need to add gzip encoding header manually. For example with nginx:

    location / {
        ...
        ...
        if ( $uri ~* "static/.*.(css|js)$" ) {
            add_header Content-Encoding gzip;
        }
    }

Hawsepiece