From 31e924995d902849662c7a4fb955dd20bd430d60 Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Wed, 8 Mar 2023 09:03:26 +0100 Subject: [PATCH] fix: apply caching headers to all produced assets (#217) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../build-headers-program.ts.snap | 34 +++++++++++-------- src/__tests__/helpers.ts | 3 +- src/build-headers-program.ts | 22 ++++++------ src/constants.ts | 3 +- src/gatsby-node.ts | 5 +-- 5 files changed, 34 insertions(+), 33 deletions(-) diff --git a/src/__tests__/__snapshots__/build-headers-program.ts.snap b/src/__tests__/__snapshots__/build-headers-program.ts.snap index 17c2d33..d7e0ae0 100644 --- a/src/__tests__/__snapshots__/build-headers-program.ts.snap +++ b/src/__tests__/__snapshots__/build-headers-program.ts.snap @@ -8,6 +8,14 @@ exports[`build-headers-program with manifest['pages-manifest'] 1`] = ` X-XSS-Protection: 1; mode=block X-Content-Type-Options: nosniff Referrer-Policy: same-origin +/webpack-runtime-acaa8994f1f704475e21.js + Cache-Control: public, max-age=31536000, immutable +/styles.1025963f4f2ec7abbad4.css + Cache-Control: public, max-age=31536000, immutable +/styles-565f081c8374bbda155f.js + Cache-Control: public, max-age=31536000, immutable +/app-f33c13590352da20930f.js + Cache-Control: public, max-age=31536000, immutable /component---node-modules-gatsby-plugin-offline-app-shell-js-78f9e4dea04737fa062d.js Cache-Control: public, max-age=31536000, immutable /0-0180cd94ef2497ac7db8.js @@ -18,15 +26,9 @@ exports[`build-headers-program with manifest['pages-manifest'] 1`] = ` Cache-Control: public, max-age=31536000, immutable /component---src-pages-index-js-0bdd01c77ee09ef0224c.js Cache-Control: public, max-age=31536000, immutable -/pages-manifest-ab11f09e0ca7ecd3b43e.js - Cache-Control: public, max-age=31536000, immutable -/webpack-runtime-acaa8994f1f704475e21.js - Cache-Control: public, max-age=31536000, immutable -/styles.1025963f4f2ec7abbad4.css - Cache-Control: public, max-age=31536000, immutable -/styles-565f081c8374bbda155f.js +/711-90491aa56de138c82516.js Cache-Control: public, max-age=31536000, immutable -/app-f33c13590352da20930f.js +/pages-manifest-ab11f09e0ca7ecd3b43e.js Cache-Control: public, max-age=31536000, immutable /static/* Cache-Control: public, max-age=31536000, immutable @@ -46,6 +48,14 @@ exports[`build-headers-program with security headers 1`] = ` Content-Security-Policy: frame-ancestors 'self' https://*.storyblok.com/ /hello X-Frame-Options: SAMEORIGIN +/webpack-runtime-acaa8994f1f704475e21.js + Cache-Control: public, max-age=31536000, immutable +/styles.1025963f4f2ec7abbad4.css + Cache-Control: public, max-age=31536000, immutable +/styles-565f081c8374bbda155f.js + Cache-Control: public, max-age=31536000, immutable +/app-f33c13590352da20930f.js + Cache-Control: public, max-age=31536000, immutable /component---node-modules-gatsby-plugin-offline-app-shell-js-78f9e4dea04737fa062d.js Cache-Control: public, max-age=31536000, immutable /0-0180cd94ef2497ac7db8.js @@ -56,13 +66,7 @@ exports[`build-headers-program with security headers 1`] = ` Cache-Control: public, max-age=31536000, immutable /component---src-pages-index-js-0bdd01c77ee09ef0224c.js Cache-Control: public, max-age=31536000, immutable -/webpack-runtime-acaa8994f1f704475e21.js - Cache-Control: public, max-age=31536000, immutable -/styles.1025963f4f2ec7abbad4.css - Cache-Control: public, max-age=31536000, immutable -/styles-565f081c8374bbda155f.js - Cache-Control: public, max-age=31536000, immutable -/app-f33c13590352da20930f.js +/711-90491aa56de138c82516.js Cache-Control: public, max-age=31536000, immutable /static/* Cache-Control: public, max-age=31536000, immutable diff --git a/src/__tests__/helpers.ts b/src/__tests__/helpers.ts index aa9c33c..6f16415 100644 --- a/src/__tests__/helpers.ts +++ b/src/__tests__/helpers.ts @@ -143,8 +143,6 @@ export const createPluginData = async () => { ], ]), manifest: { - 'main.js': `render-page.js`, - 'main.js.map': `render-page.js.map`, app: [ `webpack-runtime-acaa8994f1f704475e21.js`, `styles.1025963f4f2ec7abbad4.css`, @@ -166,6 +164,7 @@ export const createPluginData = async () => { `0-0180cd94ef2497ac7db8.js`, `component---src-pages-index-js-0bdd01c77ee09ef0224c.js`, ], + '711-90491aa56de138c82516.js': `711-90491aa56de138c82516.js`, }, pathPrefix: ``, publicFolder: (...files: any[]) => join(tmpDir, ...files), diff --git a/src/build-headers-program.ts b/src/build-headers-program.ts index 84f1ed6..dcdf85f 100644 --- a/src/build-headers-program.ts +++ b/src/build-headers-program.ts @@ -182,18 +182,16 @@ const applyCachingHeaders = return headers } - let chunks = [] - // Gatsby v3.5 added componentChunkName to store().components - // So we prefer to pull chunk names off that as it gets very expensive to loop - // over large numbers of pages. - const isComponentChunkSet = Boolean(pluginData.components.entries()?.next()?.value[1]?.componentChunkName) - chunks = isComponentChunkSet - ? [...pluginData.components.values()].map((c) => c.componentChunkName) - : [...pluginData.pages.values()].map((page) => page.componentChunkName) - - chunks.push(`pages-manifest`, `app`) - - const files = chunks.flatMap((chunk) => pluginData.manifest[chunk]) + const files = new Set() + for (const fileNameOrArrayOfFileNames of Object.values(pluginData.manifest)) { + if (Array.isArray(fileNameOrArrayOfFileNames)) { + for (const filename of fileNameOrArrayOfFileNames) { + files.add(filename) + } + } else if (typeof fileNameOrArrayOfFileNames === `string`) { + files.add(fileNameOrArrayOfFileNames) + } + } const cachingHeaders = {} diff --git a/src/constants.ts b/src/constants.ts index e5c06da..b6a1e17 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,6 +1,5 @@ // Gatsby values -export const BUILD_HTML_STAGE = `build-html` -export const BUILD_CSS_STAGE = `build-css` +export const BUILD_BROWSER_BUNDLE_STAGE = `build-javascript` // Plugin values export const NETLIFY_HEADERS_FILENAME = `_headers` diff --git a/src/gatsby-node.ts b/src/gatsby-node.ts index 25faf49..37472b2 100644 --- a/src/gatsby-node.ts +++ b/src/gatsby-node.ts @@ -6,7 +6,7 @@ import { generatePageDataPath } from 'gatsby-core-utils' import WebpackAssetsManifest from 'webpack-assets-manifest' import buildHeadersProgram from './build-headers-program' -import { DEFAULT_OPTIONS, BUILD_HTML_STAGE, BUILD_CSS_STAGE, PAGE_COUNT_WARN } from './constants' +import { DEFAULT_OPTIONS, BUILD_BROWSER_BUNDLE_STAGE, PAGE_COUNT_WARN } from './constants' import createRedirects from './create-redirects' import makePluginData from './plugin-data' @@ -44,7 +44,8 @@ export const pluginOptionsSchema = ({ Joi }: any) => { /** @type {import("gatsby").GatsbyNode["onCreateWebpackConfig"]} */ export const onCreateWebpackConfig = ({ actions, stage }: any) => { - if (stage !== BUILD_HTML_STAGE && stage !== BUILD_CSS_STAGE) { + // We only need to get manifest for production browser bundle + if (stage !== BUILD_BROWSER_BUNDLE_STAGE) { return } actions.setWebpackConfig({