Frontend: compress most files to .gz

This saves about 75mb of image size

Author: Williangalvani

core/frontend/package.json

@@ -94,6 +94,7 @@
     "typescript": "~4.9.5",
     "unplugin-vue-components": "^0.25.2",
     "vite": "3",
+    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-pwa": "^0.16.5",
     "vite-plugin-wasm": "^3.4.1",
     "vue-cli-plugin-vuetify": "~2.4.1",

core/frontend/vite.config.js

@@ -4,6 +4,7 @@ import Components from 'unplugin-vue-components/vite'
 import { defineConfig, loadEnv } from 'vite'
 import { sentryVitePlugin } from "@sentry/vite-plugin";
 import { VitePWA } from 'vite-plugin-pwa'
+import viteCompression from 'vite-plugin-compression'
 import wasm from "vite-plugin-wasm"
 const { name } = require('./package.json')
 
@@ -100,6 +101,14 @@ export default defineConfig(({ command, mode }) => {
           removeNonJson(repoPath)
         }
       },
+      // Pre-compress assets with gzip for nginx to serve via gzip_static always
+      viteCompression({
+        algorithm: 'gzip',
+        ext: '.gz',
+        threshold: 1024,
+        deleteOriginFile: true,
+        filter: /\.(js|css|json|svg|txt|xml|wasm)$/i,
+      }),
     ],
     assetsInclude: ['**/*.gif', '**/*.glb', '**/*.png', '**/*.svg', '**/*.msg', "**/three/examples/jsm/libs/draco/*"],
     resolve: {

core/tools/nginx/nginx.conf

@@ -24,6 +24,9 @@ http {
     include /etc/nginx/mime.types;
     default_type application/octet-stream;
 
+    # Serve pre-compressed .gz files even without originals (requires client gzip support)
+    gzip_static always;
+
     # Cache
     proxy_cache_path /var/cache/nginx keys_zone=ourcache:10m levels=1:2 max_size=1g inactive=30d;
 
@@ -265,7 +268,6 @@ http {
 
         location /assets/ {
             root /home/pi/frontend;
-            try_files $uri $uri/;
             autoindex on;
             add_header Cache-Control "public, max-age=604800";
         }