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

Answer 1

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.

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