6

Does Create React App provides gzip compression out of the box?

Since in console output it shows below , is it enough to serve them in production , is any particular configuration required ? Please confirm if anyone is aware

File sizes after gzip:

88.96 KB build\static\js\2.67a35d8a.chunk.js

45.81 KB build\static\js\3.06562e80.chunk.js

2.17 KB build\static\js\4.2dca02a2.chunk.js

1.71 KB build\static\js\main.01ef12c5.chunk.js

Vaibhav Mittal
  • 145
  • 2
  • 8

2 Answers2

3

No it does not. And as a matter of fact, It does not allow us to change the default configuration of the Module Bundler which it uses ( Webpack). If you want to serve gzipped compressed bundle to make your apps load faster on client side, then you can find my answer posted at https://stackoverflow.com/a/67716096/2631276

aumiom
  • 170
  • 1
  • 8
1

I don't believe so but it looks like you can configure this on your own in your package.json file in your postbuild script.

This post might be helpful for you.

Matt Croak
  • 2,788
  • 2
  • 17
  • 35
  • 1
    Ok thanks for sharing your opinion , but then why they have put the comment"File sizes after gzip: – Vaibhav Mittal Nov 05 '19 at 12:29
  • I think they do gzip bundle because I have noticed after build process for production for example bundle 2.64df9857.chunk size is 283 kb in build folder but on browser when checked in n/w tab when served through "serve -s build" that bundle size downloaded in browser for 2.64df9857.chunk is only "89.6kb" , I am surprised how come bundle size is different in bundle directory then what is actually served in browser – Vaibhav Mittal Nov 05 '19 at 12:56
  • What do your build scripts look like? So far I have been unable to find any documentation/forums that confirm `gzip` is an innate part of `create-react-app`. Here's another [stack question](https://stackoverflow.com/questions/55704772/how-to-compress-build-with-without-ejecting-create-react-app-also-include-compr) from 6 months ago that talks about using `postbuild` as well. Production mode would explain why the browser has a smaller bundle size than your local project I'm not sure what your production settings look like. – Matt Croak Nov 05 '19 at 18:03
  • I have not changed anything in my script section , its same as it is – Vaibhav Mittal Nov 05 '19 at 18:10
  • "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, – Vaibhav Mittal Nov 05 '19 at 18:11
  • May be "serve -s build" does something internally before hosting build folder – Vaibhav Mittal Nov 05 '19 at 18:29
  • 2
    @VaibhavMittal `serve` seems to support gzip compression. See [this comment](https://github.com/facebook/create-react-app/issues/5620#issuecomment-438056872). – Firmin Martin Oct 27 '21 at 07:37