Add gzip compression and caching for static assets
The admin UI is a traditional multi-page app that loads ~13 separate vendor/app JS+CSS files on every full navigation; none were compressed and Cache-Control was max-age=0 (Express's default), forcing a revalidation round-trip for every asset on every page view. Add gzip (compression middleware) and sane Cache-Control (7d for vendor libs under /static-modules, 1h for the app's own /static JS/CSS, which isn't cache-busted). Matches the equivalent fix in theta42/proxy. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
+12
-3
@@ -3,6 +3,7 @@
|
||||
const path = require('path');
|
||||
const ejs = require('ejs')
|
||||
const express = require('express');
|
||||
const compression = require('compression');
|
||||
|
||||
// Set up the express app.
|
||||
const app = express();
|
||||
@@ -40,8 +41,15 @@ app.onListen.push(function(){
|
||||
});
|
||||
});
|
||||
|
||||
// Gzip text responses (HTML/JS/CSS/JSON). The admin UI loads ~13 separate,
|
||||
// uncompressed vendor JS/CSS files on every full page navigation (a
|
||||
// traditional multi-page app, not an SPA) — this alone meaningfully cuts
|
||||
// bytes-over-the-wire and perceived load time on a real network, where it
|
||||
// matters far more than on localhost.
|
||||
app.use(compression());
|
||||
|
||||
// load the JSON parser middleware. Express will parse JSON into native objects
|
||||
// for any request that has JSON in its content type.
|
||||
// for any request that has JSON in its content type.
|
||||
app.use(express.json());
|
||||
app.set('trust proxy', 1);
|
||||
|
||||
@@ -50,8 +58,9 @@ app.set('views', path.join(__dirname, 'views'));
|
||||
app.set('view engine', 'ejs');
|
||||
|
||||
// Have express server static content( images, CSS, browser JS) from the public
|
||||
// local folder.
|
||||
app.use('/static', express.static(path.join(__dirname, 'public')))
|
||||
// local folder. maxAge is short since this is the app's own JS/CSS, which
|
||||
// changes on every deploy and isn't cache-busted/fingerprinted.
|
||||
app.use('/static', express.static(path.join(__dirname, 'public'), {maxAge: '1h'}))
|
||||
|
||||
// Routes for front end content.
|
||||
app.use('/', require('./routes/index'));
|
||||
|
||||
Generated
+64
@@ -14,6 +14,7 @@
|
||||
"@simpleworkjs/conf": "^1.1.0",
|
||||
"bcrypt": "^6.0.0",
|
||||
"bootstrap": "^5.3.8",
|
||||
"compression": "^1.8.1",
|
||||
"ejs": "^3.1.10",
|
||||
"express": "^5.2.1",
|
||||
"express-rate-limit": "^8.5.2",
|
||||
@@ -2340,6 +2341,60 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/compressible": {
|
||||
"version": "2.0.18",
|
||||
"resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
|
||||
"integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mime-db": ">= 1.43.0 < 2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/compression": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/compression/-/compression-1.8.1.tgz",
|
||||
"integrity": "sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"bytes": "3.1.2",
|
||||
"compressible": "~2.0.18",
|
||||
"debug": "2.6.9",
|
||||
"negotiator": "~0.6.4",
|
||||
"on-headers": "~1.1.0",
|
||||
"safe-buffer": "5.2.1",
|
||||
"vary": "~1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/compression/node_modules/debug": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/compression/node_modules/ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/compression/node_modules/negotiator": {
|
||||
"version": "0.6.4",
|
||||
"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
|
||||
"integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
@@ -4976,6 +5031,15 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/on-headers": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.1.0.tgz",
|
||||
"integrity": "sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/once": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
"@simpleworkjs/conf": "^1.1.0",
|
||||
"bcrypt": "^6.0.0",
|
||||
"bootstrap": "^5.3.8",
|
||||
"compression": "^1.8.1",
|
||||
"ejs": "^3.1.10",
|
||||
"express": "^5.2.1",
|
||||
"express-rate-limit": "^8.5.2",
|
||||
|
||||
@@ -26,13 +26,17 @@ const frontEndModules = ['bootstrap', 'mustache', 'jquery', '@fortawesome',
|
||||
|
||||
// Server front end modules
|
||||
// https://stackoverflow.com/a/55700773/3140931
|
||||
// Vendor libraries only change when package versions are bumped (a rebuild),
|
||||
// so they're safe to cache aggressively; ETag/Last-Modified (on by default)
|
||||
// still cover that rare case with a cheap 304 instead of a stale asset.
|
||||
frontEndModules.forEach(dep => {
|
||||
router.use(`/static-modules/${dep}`, express.static(path.join(__dirname, `../node_modules/${dep}`)))
|
||||
router.use(`/static-modules/${dep}`, express.static(path.join(__dirname, `../node_modules/${dep}`), {maxAge: '7d'}))
|
||||
});
|
||||
|
||||
// Have express server static content( images, CSS, browser JS) from the public
|
||||
// local folder.
|
||||
router.use('/static', express.static(path.join(__dirname, '../public')))
|
||||
// local folder. Shorter maxAge than /static-modules since this is the app's
|
||||
// own JS/CSS, which changes on every deploy and isn't cache-busted/fingerprinted.
|
||||
router.use('/static', express.static(path.join(__dirname, '../public'), {maxAge: '1h'}))
|
||||
|
||||
// Public health endpoint for container/orchestration healthchecks.
|
||||
// Mounted at / (no auth) in app.js, so this is intentionally unauthenticated.
|
||||
|
||||
Reference in New Issue
Block a user