From 495d01f3860bb88104819790bfd07b69f7e3af32 Mon Sep 17 00:00:00 2001 From: Matteo Pagliazzi Date: Fri, 17 Apr 2020 14:52:28 +0200 Subject: [PATCH] fix(static files): cache more static files (#12102) --- website/client/public/static/README.md | 13 ++++++++++ website/server/middlewares/static.js | 35 ++++++++++++++++++-------- 2 files changed, 37 insertions(+), 11 deletions(-) create mode 100644 website/client/public/static/README.md diff --git a/website/client/public/static/README.md b/website/client/public/static/README.md new file mode 100644 index 0000000000..d8cf3d672e --- /dev/null +++ b/website/client/public/static/README.md @@ -0,0 +1,13 @@ +The files in the following subfolders: + +- audio +- emails +- icons +- merch +- presskit + +are not processed by Webpack so their filenames don't get hashed, but given that they almost never change, they're still cached for 1 week. + +In case one of the files needs to be updated the filename should be changed if possible. + +For more information see `website/server/middlewares/static.js`. \ No newline at end of file diff --git a/website/server/middlewares/static.js b/website/server/middlewares/static.js index 7ac96763d2..37de20e229 100644 --- a/website/server/middlewares/static.js +++ b/website/server/middlewares/static.js @@ -3,24 +3,37 @@ import nconf from 'nconf'; import path from 'path'; const IS_PROD = nconf.get('IS_PROD'); -const MAX_AGE = IS_PROD ? 31536000000 : 0; +const ONE_YEAR = IS_PROD ? 31536000000 : 0; +const ONE_WEEK = IS_PROD ? 604800000 : 0; const BASE_DIR = path.join(__dirname, '/../../..'); +// @TODO refactor so every file is hashed export default function staticMiddleware (expressApp) { - // Expose static files for new client - expressApp.use('/static/js', express.static(`${BASE_DIR}/website/client/dist/static/js`, { maxAge: MAX_AGE })); - expressApp.use('/static/css', express.static(`${BASE_DIR}/website/client/dist/static/css`, { maxAge: MAX_AGE })); - expressApp.use('/static/svg', express.static(`${BASE_DIR}/website/client/dist/static/svg`, { maxAge: MAX_AGE })); - expressApp.use('/static/img', express.static(`${BASE_DIR}/website/client/dist/static/img`, { maxAge: MAX_AGE })); + /* Expose static files for the client + These files are processed by Webpack and the filenames are hashed + This allows them to be cached for one year since the filename changes in case the file changes. + */ + expressApp.use('/static/js', express.static(`${BASE_DIR}/website/client/dist/static/js`, { maxAge: ONE_YEAR })); + expressApp.use('/static/css', express.static(`${BASE_DIR}/website/client/dist/static/css`, { maxAge: ONE_YEAR })); + expressApp.use('/static/svg', express.static(`${BASE_DIR}/website/client/dist/static/svg`, { maxAge: ONE_YEAR })); + expressApp.use('/static/img', express.static(`${BASE_DIR}/website/client/dist/static/img`, { maxAge: ONE_YEAR })); - // @TODO img/js/css under /static have their names hashed after every change so they can be cached - // Not files in /audio and /sprites, that's why we don't cache them. - // Hash their file names and cache the entire /static folder + /* Expose other static files (audio, emails images, ...) + These files are not processed by Webpack but they change very rarely. + So we still cache them for 1 week. + */ + expressApp.use('/static/audio', express.static(`${BASE_DIR}/website/client/dist/static/audio`, { maxAge: ONE_WEEK })); + expressApp.use('/static/emails', express.static(`${BASE_DIR}/website/client/dist/static/emails`, { maxAge: ONE_WEEK })); + expressApp.use('/static/icons', express.static(`${BASE_DIR}/website/client/dist/static/icons`, { maxAge: ONE_WEEK })); + expressApp.use('/static/merch', express.static(`${BASE_DIR}/website/client/dist/static/merch`, { maxAge: ONE_WEEK })); + expressApp.use('/static/presskit', express.static(`${BASE_DIR}/website/client/dist/static/presskit`, { maxAge: ONE_WEEK })); + + /* The remaining files are not cached yet. */ expressApp.use('/static', express.static(`${BASE_DIR}/website/client/dist/static`)); - // Storybook + /* Storybook files, not cached yet. */ expressApp.use('/storybook', express.static(`${BASE_DIR}/website/client/dist/storybook`)); - // Apidoc + /* APIdoc files, not cached yet. */ expressApp.use('/apidoc', express.static(`${BASE_DIR}/apidoc_build`)); }