fix: apply caching headers to all produced assets (#217)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: pieh

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

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),

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 = {}
 

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`

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({