Serve static assets with an efficient cache policy (#2216) (#4489)

Co-authored-by: Mauro Amico <mauro.amico@gmail.com>
Co-authored-by: nzambello <nzambello@protonmail.com>
Co-authored-by: Tiberiu Ichim <tiberiu.ichim@gmail.com>
Co-authored-by: Tiberiu Ichim <tiberiuichim@users.noreply.github.com>

CHANGELOG.md

@@ -1089,6 +1089,9 @@ See https://6.dev-docs.plone.org/volto/upgrade-guide/index.html for more informa
 
 ### Breaking
 
+- Add directive to cache stable resources in browser or intermediate server for 365 days,
+  static resource that could change after a new deployment for 1 minute. @mamico
+
 ### Feature
 
 - Added new components `Aliases` for aliases control in Volto. Alias management in both controlpanel and object view. @andreiggr @avoinea

src/config/server.js

@@ -2,6 +2,7 @@ import imagesMiddleware from '@plone/volto/express-middleware/images';
 import filesMiddleware from '@plone/volto/express-middleware/files';
 import robotstxtMiddleware from '@plone/volto/express-middleware/robotstxt';
 import sitemapMiddleware from '@plone/volto/express-middleware/sitemap';
+import staticsMiddleware from '@plone/volto/express-middleware/static';
 import devProxyMiddleware from '@plone/volto/express-middleware/devproxy';
 
 const settings = {
@@ -11,10 +12,28 @@ const settings = {
     imagesMiddleware(),
     robotstxtMiddleware(),
     sitemapMiddleware(),
+    staticsMiddleware(),
   ],
   criticalCssPath: 'public/critical.css',
   readCriticalCss: null, // so it will be defaultReadCriticalCss
   extractScripts: { errorPages: false },
+  staticFiles: [
+    {
+      id: 'root_static',
+      match: /^\/static\/.*/,
+      headers: {
+        // stable resources never change. 31536000 seconds == 365 days
+        'Cache-Control': 'public, max-age=31536000',
+      },
+    },
+    {
+      id: 'all',
+      match: /.*/,
+      headers: {
+        'Cache-Control': 'public, max-age=60',
+      },
+    },
+  ],
 };
 
 export default settings;

src/express-middleware/static.js

@@ -0,0 +1,32 @@
+import express from 'express';
+import path from 'path';
+import config from '@plone/volto/registry';
+
+const staticMiddleware = express.static(
+  process.env.BUILD_DIR
+    ? path.join(process.env.BUILD_DIR, 'public')
+    : process.env.RAZZLE_PUBLIC_DIR,
+  {
+    setHeaders: function (res, path) {
+      const pathLib = require('path');
+      const base = pathLib.resolve(process.env.RAZZLE_PUBLIC_DIR);
+      const relpath = path.substr(base.length);
+      config.settings.serverConfig.staticFiles.some((elem) => {
+        if (relpath.match(elem.match)) {
+          for (const name in elem.headers) {
+            res.setHeader(name, elem.headers[name] || 'undefined');
+          }
+          return true;
+        }
+        return false;
+      });
+    },
+  },
+);
+
+export default function () {
+  const middleware = express.Router();
+  middleware.all('*', staticMiddleware);
+  middleware.id = 'staticResourcesProcessor';
+  return middleware;
+}

src/server.jsx

@@ -59,13 +59,6 @@ const supported = new locale.Locales(keys(languages), 'en');
 
 const server = express()
   .disable('x-powered-by')
-  .use(
-    express.static(
-      process.env.BUILD_DIR
-        ? path.join(process.env.BUILD_DIR, 'public')
-        : process.env.RAZZLE_PUBLIC_DIR,
-    ),
-  )
   .head('/*', function (req, res) {
     // Support for HEAD requests. Required by start-test utility in CI.
     res.send('');