How to compress build with/without ejecting create-react-app. Also include compressed file into script tag into index.html

Question

I'm using react-scripts build to make production ready build and to deploy it on AWS server I'm using

GENERATE_SOURCEMAP=false yarn build && aws s3 sync build/ s3://*********

Is there any way to apply gzip compression to build files and include gzipped files into index.html and deploy it on aws so that in browser gzipped files would be served.

Normally I would compress the files through CloudFront. See: https://stackoverflow.com/questions/54655204/steps-to-deploy-a-react-app-on-s3-with-cloudfront-while-managing-caching — CharlieH, Apr 26 '19 at 16:55
@CharlieHileman I did it with the help of CloudFront and It is working nicely. Thanks for the idea. This [link](https://deliciousbrains.com/wp-offload-media/doc/assets-enable-gzip-compression-in-cloudfront-and-maxcdn/) has the details of how to do it. — harish kumar, Feb 21 '20 at 18:43

score 21 · Answer 1 · answered Aug 31 '19 at 19:40

Install gzipper package (https://www.npmjs.com/package/gzipper). Modify build command like this

"build": "react-scripts build && gzipper --verbose ./build"

and build your project you will get both gzip and regular file. It is upto you to make server to serve gzip instead of regular file. If you are using nginx you have to setup your server in nginx.conf file as below

server {
        # Gzip Settings
        gzip on;
        gzip_static on; # allows pre-serving of .gz file if it exists 
        gzip_disable "msie6"; # Disable for user-agent Internet explorer 6. Not supported.
        gzip_proxied any; # enable gzip for all proxied requests
        gzip_buffers 16 8k; # number and size of buffers to compress a response
        gzip_http_version 1.1;
        gzip_min_length 256; # Only gzip files of size in bytes
        gzip_types text/plain text/css text/html application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
        gunzip on; # Uncompress on the fly
        listen       4000;
        server_name  localhost;



        location / {
            root   html/react-app;
            index  index.html index.htm;
        }


        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }


    }

You should add `compress` to compress the command will be: `react-scripts build && gzipper compress --verbose ./build` — Amir2mi, Mar 13 '22 at 16:02

score 6 · Answer 2 · edited Nov 11 '21 at 16:45

6

You can add post build compression to your create-react-app build with minimal configuration using compress-create-react-app. It compresses all html, css and javascript files in the build folder using brotli and gzip algorithms.

First install it as dev dependency:

npm install compress-create-react-app --save-dev

Then edit the build command in your package.json:

    "scripts": {
    "start": "react-scripts start",
-   "build": "react-scripts build",
+   "build": "react-scripts build && compress-cra",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

That's it. Your app will be compressed when you build it.

Disclaimer: I'm the author of compress-create-react-app

edited Nov 11 '21 at 16:45

Koen.

25,449
7
83
78

answered Sep 14 '21 at 15:11

jnsjknn

61
1
2

Any chance, we can run this on `npm run start` ? it makes life easier, when working with lighthouse debugging in devtools. – Val Nov 16 '21 at 09:50
I'll see what I can do but it's probably difficult to make create-react-app serve the compressed files. Feel free to make a pull request on GitHub if you have an idea on how to do it and want to contribute. – jnsjknn Nov 17 '21 at 10:14
@jnsjknn thanks! I tried your package & it seems to be working nicely. I then serve my static resources via `app.use("/", expressStaticGzip(path.resolve(__dirname)));` – Sangeet Agarwal Mar 22 '22 at 13:27
Thanks for this, I followed your setup however the original uncompressed static files still exist in the ./build/static folder. Additionally, 2 compressed files exist for each original file, one for br and another for gz. Shouldn't there only be one? – MShakeG Aug 03 '22 at 10:38
@MShakeG The original files are not deleted. Now that you mentioned it, I might add an option to the config file to delete them. The default configuration uses both brotli and gzip to compress the files, which is why there are both .br and .gz files. Brotli files are compressed more but are not supported by all browsers, so the idea is that those browsers can fall back to gzipped files. You can chat the configuration with the config file. – jnsjknn Aug 04 '22 at 12:30
@jnsjknn thanks for clarifying that, but how would I confirm that the gzipped files are actually being served and not the original file, I haven't noticed a difference in the static files being served in the dev tools networks tab from the standard build script and yours when serving the build locally. – MShakeG Aug 04 '22 at 14:30
@MShakeG In Chromium based browsers, open developer tools. Click 'Network'. From the list of connected domains, you can choose a domain and see what compression it used under section 'Response headers' in 'content-encoding' field. If you're using the React server, it won't serve the compressed files. You have to use a custom server – jnsjknn Aug 05 '22 at 18:28
@jnsjknn I see, thanks, what custom server do you recommend using locally? My current app is hosted on AWS and served from CloudFront – MShakeG Aug 05 '22 at 21:19
I don't have enough experience with different options to recommend anything. I use Express with express-static-gzip. – jnsjknn Aug 06 '22 at 12:18
It made my build size from 12mb to 14mb :/ – Ahmad Habib Feb 15 '23 at 07:07
@AhmadHabib Could you create an issue in the GitHub repo explaining what you did and what happened and I'll look into it. – jnsjknn Feb 16 '23 at 08:29

Tim · Answer 3 · 2020-10-16T15:30:13.057

4

I used this command to gzip files keep them the same name

- yarn global add gzipper
- gzipper compress ./build ./gzip_build --output-file-format [filename].[ext] --verbose

FYI: gzipper --verbose got me an error. Missed "compress".

edited Oct 16 '20 at 15:30

answered Oct 16 '20 at 15:03

Tim

51
3

score 3 · Answer 4 · answered Jun 29 '19 at 20:23

3

You could also just add a postbuild script in your package.json with:

"postbuild": "find ./build -type f -name '*.css' -o -name '*.js' -exec gzip -k '{}' \\;"

answered Jun 29 '19 at 20:23

teebot

1,089
2
12
25

score 1 · Accepted Answer · answered Apr 16 '19 at 09:50

1

It's not really easy to change cra build process, you can eject it but you'll have to create your own after. But, in your package.json you can define a task to be launched after the build :

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postbuild": "node yourNodeGzipScript.js"   }

Hope it can help.

answered Apr 16 '19 at 09:50

Nil

355
1
2
8

I'm able to compress the files but not able to change injected file name as .gz has to be included in the last of file name e.g changing from ** **.chunks.js** to ** **chunks.js.gz** – harish kumar Apr 16 '19 at 12:25
Have you tried using the "rename" or "copy" methods of the "fs" package? – Nil Apr 16 '19 at 15:01
Yes I did that, I made a .js file and use 'fs' to update script & css tags. And it worked.. Thanks buddy. – harish kumar Apr 18 '19 at 12:11

How to compress build with/without ejecting create-react-app. Also include compressed file into script tag into index.html

5 Answers5

Linked