The correct way of serving react build created by webpack

Question

I have an app created by create-react-app. After running npm run build I got a message:

File sizes after gzip:

550.11 KB build/static/js/main.0bef6e38.js

46.61 KB build/static/css/main.dffb4fca.css

Nice. But after running serve -s build I got size of app in browser equal to initial 2.5 Mb. So I checked the bundle in the file system and there it has the size of 2.5 Mb too.

So the question is: Why is this happening and what's the correct way to serve a react application? Thanks!

Answer 1

There are 2 modes that webpack 4 comes with, development & production . By default it serves the build as development .

If you want to build for production just run npx webpack -p .

Answer 2

Well, that report states that your bundle will only have that size after gzip. Well, you have to allow gzip. In http libraries, for example express, you can add compression as a middleware which will enable gzip and your content will be server as gzip.

That depends on how you are serving it and how you static file server allows you to enable gzip.