fix(gatsby): add componentChunkName to components list so don't need to loop over pages (#31547)

* fix(gatsby): add componentChunkName to components list so don't need to loop over pages

* fix type

* fix tests

* more fixes

* Guard against null values

Author: KyleAMathews

packages/gatsby-plugin-gatsby-cloud/src/__tests__/build-headers-program.js

@@ -28,6 +28,32 @@ describe(`build-headers-program`, () => {
     )
 
     return {
+      components: new Map([
+        [
+          1,
+          {
+            componentChunkName: `component---node-modules-gatsby-plugin-offline-app-shell-js`,
+          },
+        ],
+        [
+          2,
+          {
+            componentChunkName: `component---src-templates-blog-post-js`,
+          },
+        ],
+        [
+          3,
+          {
+            componentChunkName: `component---src-pages-404-js`,
+          },
+        ],
+        [
+          4,
+          {
+            componentChunkName: `component---src-pages-index-js`,
+          },
+        ],
+      ]),
       pages: new Map([
         [
           `/offline-plugin-app-shell-fallback/`,

packages/gatsby-plugin-gatsby-cloud/src/build-headers-program.js

@@ -273,9 +273,19 @@ const applyCachingHeaders = (
     return headers
   }
 
-  const chunks = Array.from(pluginData.pages.values()).map(
-    page => page.componentChunkName
-  )
+  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 = !!pluginData.components.entries()?.next()
+    ?.value[1]?.componentChunkName
+  if (isComponentChunkSet) {
+    chunks = [...pluginData.components.values()].map(c => c.componentChunkName)
+  } else {
+    chunks = Array.from(pluginData.pages.values()).map(
+      page => page.componentChunkName
+    )
+  }
 
   chunks.push(`pages-manifest`, `app`)
 

packages/gatsby-plugin-gatsby-cloud/src/plugin-data.js

@@ -8,7 +8,7 @@ export function buildPrefixer(prefix, ...paths) {
 // shape of `static-entry.js`. With it, we can build headers that point to the correct
 // hashed filenames and ensure we pull in the componentChunkName.
 export default function makePluginData(store, assetsManifest, pathPrefix) {
-  const { program, pages: storePages } = store.getState()
+  const { program, pages, components } = store.getState()
   const publicFolder = buildPrefixer(program.directory, `public`)
   const functionsFolder = buildPrefixer(
     program.directory,
@@ -18,13 +18,13 @@ export default function makePluginData(store, assetsManifest, pathPrefix) {
   const stats = require(publicFolder(`webpack.stats.json`))
   // Get all the files, not just the first
   const chunkManifest = stats.assetsByChunkName
-  const pages = storePages
 
   // We combine the manifest of JS and the manifest of assets to make a lookup table.
   const manifest = { ...assetsManifest, ...chunkManifest }
 
   return {
     pages,
+    components,
     manifest,
     program,
     pathPrefix,

packages/gatsby-plugin-netlify/src/__tests__/build-headers-program.js

@@ -28,6 +28,32 @@ describe(`build-headers-program`, () => {
     )
 
     return {
+      components: new Map([
+        [
+          1,
+          {
+            componentChunkName: `component---node-modules-gatsby-plugin-offline-app-shell-js`,
+          },
+        ],
+        [
+          2,
+          {
+            componentChunkName: `component---src-templates-blog-post-js`,
+          },
+        ],
+        [
+          3,
+          {
+            componentChunkName: `component---src-pages-404-js`,
+          },
+        ],
+        [
+          4,
+          {
+            componentChunkName: `component---src-pages-index-js`,
+          },
+        ],
+      ]),
       pages: new Map([
         [
           `/offline-plugin-app-shell-fallback/`,

packages/gatsby-plugin-netlify/src/build-headers-program.js

@@ -306,9 +306,19 @@ const applyCachingHeaders = (
     return headers
   }
 
-  const chunks = Array.from(pluginData.pages.values()).map(
-    page => page.componentChunkName
-  )
+  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 = !!pluginData.components.entries()?.next()
+    ?.value[1]?.componentChunkName
+  if (isComponentChunkSet) {
+    chunks = [...pluginData.components.values()].map(c => c.componentChunkName)
+  } else {
+    chunks = Array.from(pluginData.pages.values()).map(
+      page => page.componentChunkName
+    )
+  }
 
   chunks.push(`pages-manifest`, `app`)
 

packages/gatsby-plugin-netlify/src/plugin-data.js

@@ -8,18 +8,18 @@ export function buildPrefixer(prefix, ...paths) {
 // shape of `static-entry.js`. With it, we can build headers that point to the correct
 // hashed filenames and ensure we pull in the componentChunkName.
 export default function makePluginData(store, assetsManifest, pathPrefix) {
-  const { program, pages: storePages } = store.getState()
+  const { program, pages, components } = store.getState()
   const publicFolder = buildPrefixer(program.directory, `public`)
   const stats = require(publicFolder(`webpack.stats.json`))
   // Get all the files, not just the first
   const chunkManifest = stats.assetsByChunkName
-  const pages = storePages
 
   // We combine the manifest of JS and the manifest of assets to make a lookup table.
   const manifest = { ...assetsManifest, ...chunkManifest }
 
   return {
     pages,
+    components,
     manifest,
     pathPrefix,
     publicFolder,

packages/gatsby/src/redux/__tests__/__snapshots__/index.js.snap

@@ -4,6 +4,7 @@ exports[`redux db should write redux cache to disk 1`] = `
 Object {
   "components": Map {
     "/Users/username/dev/site/src/templates/my-sweet-new-page.js" => Object {
+      "componentChunkName": "component---users-username-dev-site-src-templates-my-sweet-new-page-js",
       "componentPath": "/Users/username/dev/site/src/templates/my-sweet-new-page.js",
       "isInBootstrap": true,
       "pages": Set {

packages/gatsby/src/redux/reducers/components.ts

@@ -22,6 +22,7 @@ export const componentsReducer = (
       if (!component) {
         component = {
           componentPath: action.payload.componentPath,
+          componentChunkName: action.payload.componentChunkName,
           query: ``,
           pages: new Set(),
           isInBootstrap: true,

packages/gatsby/src/redux/types.ts

@@ -106,6 +106,7 @@ export interface IGatsbyStaticQueryComponents {
 
 export interface IGatsbyPageComponent {
   componentPath: SystemPath
+  componentChunkName: string
   query: string
   pages: Set<string>
   isInBootstrap: boolean