Observed difference in file size between Nginx and Express server when serving static bundles

Question

I am trying to optimize serving my static bundles generated from my React Webpack app. In this process, I noticed that for same files, when serving the content through an Express server, the file sizes were comparatively lower than when served through nginx.

Here is my express code to serve the bundle:

app.use(express.static(project.paths.dist()));

Here is my nginx config:

server {
listen 80;

root /home/test/dist/;
index index.html index.htm app.js;

server_name www.ranodom.com;

location / {
    try_files $uri /index.html;
}

error_log /var/log/nginx/test/website-error_log error;
access_log /var/log/nginx/test/website-access_log;
}

When served through express:

When served through nginx:

As visible from above screenshots, the file sizes differ drastically. The actual file sizes as present in the folder is equal to the one being served from Nginx server.

My question is, what can be the reason for this difference? Does express static optimizes/compresses the served files or is there a catch? If there is so much difference, would it be better to serve these files via express server and routing to index page via nginx?

PS. The above files are already uglified and minified using webpack.

Thanks @idbehold . Just noticed that the compression middleware was enabled in my express server. — codeslayer1

codeslayer1 codeslayer1 · Accepted Answer · 2017-04-22T19:07:23

Just realized that the compression middleware was enabled in my express server and hence the reduction in size.

If anyone else stumbles on this post, do notice that you can obtain similar results using nginx by using the below mentioned configs.

gzip on;
gzip_min_length 1000;
gzip_types text/html text/css application/javascript text/javascript text/plain text/xml application/json;

Observed difference in file size between Nginx and Express server when serving static bundles

1 Answers