Compress when building

As a part of npm run build, can I also compress in addition to minifying?

[baptistemanson]

Something like this should work for you, right?

"scripts": {
  "build":"react-scripts build",
  "ship-to-s3": "gzip -r build && aws s3 cp -r build/ ... " 
}

Cloudfront, the CDN based on S3 by Amazon compresses for you. By looking at our analytics, 5% of users do not accept gzip as a valid encoding right now in prod for our websites.

[kevinrobinson]

This was surprising to me. Right now this guides people towards shooting themselves in the foot, especially with the deployment recommendations in the README and in Heroku’s docs. There are two other issues about it (https://github.com/facebookincubator/create-react-app/issues/3169 and https://github.com/facebookincubator/create-react-app/issues/1117) with folks saying this is unexpected as well.

Worse, the output from the build task implies that the assets are gzip compressed when they aren’t (added in https://github.com/facebookincubator/create-react-app/pull/2648):

$ yarn run build
...
File sizes after gzip:

  209.55 KB  build/static/js/main.951a4711.js
  1.77 KB    build/static/css/main.bdd787db.css
...
$ ls -alt build/static/js/
-rw-r--r--  1 krobinson  staff   703530 Oct 24 08:40 main.951a4711.js
-rw-r--r--  1 krobinson  staff  4932846 Oct 24 08:40 main.951a4711.js.map

One option could be to update the docs to recommend gzipping, and updating the docs for each deployment option recommended in the README.

Another option could be to add in https://github.com/webpack-contrib/compression-webpack-plugin to https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js#L263 so that yarn run build produces both the plain and gzipped artifacts. The downside to adding this by default is that it adds time to the production build for folks who don’t want gzipped assets. This seems like a good tradeoff - folks following the README and docs for create-react-app get gzipped assets in production by default, while increasing production build times for people who handle gzipping some other way. This also seems in line with the create-react-app philosophy to help teach and nudge folks towards learning best practices, and add sensible defaults that helps them avoid common mistakes.

Folks have mentioned that it’s common for gzipping to be done on-the-fly by the webserver. FWIW, in my experience I haven’t seen this in practice and compressing at build time has been more common. If folks adding recommended deployment options to the create-react-app docs missed this, then it’s probably a place where a default could be helpful 😃

@gaearon mentioned being open to pull requests in https://github.com/facebookincubator/create-react-app/issues/1117#issuecomment-313855881, I’m happy to add in https://github.com/webpack-contrib/compression-webpack-plugin if folks are open to it.