feat: gzip js, css, SVG icons assets

[stephanegigandet]

As pointed by @github-throwaway in openfoodfacts/smooth-app#5583 (comment) , we currently serve uncompressed assets (CSS, JS etc.).

We should add .gz versions so that they can be served by nginx. We need to keep the non .gz files as well as we use try_files, which returns a 404 if the uncompressed file does not exist:

                try_files resources/$uri $uri $uri/ =404;
                gzip_static always;
                gunzip on;

[stephanegigandet]

Works locally, but in GitHub tests I get this error:

#22 [dynamicfront builder 13/13] RUN npm run build
#22 0.329 
#22 0.329 > [email protected] build
#22 0.329 > gulp
#22 0.329 
#22 0.885 [14:18:40] Requiring external module ts-node/register
#22 1.955 TypeError: Unknown file extension ".ts" for /opt/product-opener/gulpfile.ts
#22 1.955     at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:218:9)
#22 1.955     at defaultGetFormat (node:internal/modules/esm/get_format:[244](https://github.com/openfoodfacts/openfoodfacts-server/actions/runs/12672402831/job/35316357560?pr=11208#step:4:245):36)
#22 1.955     at defaultLoad (node:internal/modules/esm/load:122:22)
#22 1.955     at async ModuleLoader.load (node:internal/modules/esm/loader:570:7)
#22 1.955     at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:443:45)
#22 1.955     at async ModuleJob._link (node:internal/modules/esm/module_job:106:19) {
#22 1.955   code: 'ERR_UNKNOWN_FILE_EXTENSION'
#22 1.955 }
#22 ERROR: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1

There's a huge thread about this error here: TypeStrong/ts-node#1997

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[teolemon]

I was convinced we had already enabled that in the past @stephanegigandet

• Compress all static assets #192

[stephanegigandet]

@teolemon it probably was working before because we had the nginx gzip module enabled in https://github.com/openfoodfacts/openfoodfacts-server/blob/main/conf/nginx/nginx.conf

but that file is not used anymore in production apparently, not sure if it's by design or not.

[stephanegigandet]

I'm not sure if it's intended and when it changed, but in production the nginx.conf is not the one we have in github.
One of the differences is that gzip_types is not set, so we don't compress anything else than html.

root@off:/etc/nginx# diff /srv/off/conf/nginx/nginx.conf nginx.conf
7c7
< 	worker_connections 768;
---
> 	worker_connections 4096;
19,20d18
< 	tcp_nodelay on;
< 	keepalive_timeout 65;
34c32
< 	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 ; # Dropping SSLv3, ref: POODLE
---
> 	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
49d46
< 	gzip_disable "msie6";
56c53
< 	gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript text/csv;
---
> 	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
64,65d60
<
< 	client_max_body_size 20M;

[stephanegigandet]

That being said, it's better to have pre-compressed static assets I think. We could remove the try_files (I'm not sure they are really useful, it doesn't make much sense to me to try multiple locations...)

                # First attempt to serve request from resource, then as file,
                # then as directory, then fall back to displaying a 404.
                try_files resources/$uri $uri $uri/ =404;
                gzip_static always;
                gunzip on;

If we remove the try_files, then we don't need to keep the uncompressed assets, as gunzip on will work.