From 3c75bce7178ce0c4b8d35983bbe2216aa5d744fe Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Sat, 22 May 2021 12:05:08 -0700 Subject: [PATCH 1/5] fix(gatsby): add componentChunkName to components list so don't need to loop over pages --- .../src/build-headers-program.js | 16 +++++++++++++--- .../src/plugin-data.js | 4 ++-- .../src/build-headers-program.js | 16 +++++++++++++--- .../gatsby-plugin-netlify/src/plugin-data.js | 4 ++-- packages/gatsby/src/redux/reducers/components.ts | 1 + 5 files changed, 31 insertions(+), 10 deletions(-) diff --git a/packages/gatsby-plugin-gatsby-cloud/src/build-headers-program.js b/packages/gatsby-plugin-gatsby-cloud/src/build-headers-program.js index 99178ce89257e..f4c9b860b1a1a 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/build-headers-program.js +++ b/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`) diff --git a/packages/gatsby-plugin-gatsby-cloud/src/plugin-data.js b/packages/gatsby-plugin-gatsby-cloud/src/plugin-data.js index 226f9bdbbfe87..19b04844c4fb9 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/plugin-data.js +++ b/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, diff --git a/packages/gatsby-plugin-netlify/src/build-headers-program.js b/packages/gatsby-plugin-netlify/src/build-headers-program.js index 072996ab9fde9..bfe88eefef032 100644 --- a/packages/gatsby-plugin-netlify/src/build-headers-program.js +++ b/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`) diff --git a/packages/gatsby-plugin-netlify/src/plugin-data.js b/packages/gatsby-plugin-netlify/src/plugin-data.js index 4bbaae96ec8c4..995c54951467f 100644 --- a/packages/gatsby-plugin-netlify/src/plugin-data.js +++ b/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, diff --git a/packages/gatsby/src/redux/reducers/components.ts b/packages/gatsby/src/redux/reducers/components.ts index 684708dfc2294..15c2ee97193ad 100644 --- a/packages/gatsby/src/redux/reducers/components.ts +++ b/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, From 71ddc95505b13d78d9c1acc782d123427f4512ed Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Sat, 22 May 2021 20:12:50 -0700 Subject: [PATCH 2/5] fix type --- packages/gatsby/src/redux/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/gatsby/src/redux/types.ts b/packages/gatsby/src/redux/types.ts index c33d6ccac41fa..ce4c28846f295 100644 --- a/packages/gatsby/src/redux/types.ts +++ b/packages/gatsby/src/redux/types.ts @@ -106,6 +106,7 @@ export interface IGatsbyStaticQueryComponents { export interface IGatsbyPageComponent { componentPath: SystemPath + componentChunkName: string query: string pages: Set isInBootstrap: boolean From 43ae84252328bdb60d1fef3afcb460de8a5d4a14 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Sat, 22 May 2021 20:48:43 -0700 Subject: [PATCH 3/5] fix tests --- .../src/__tests__/build-headers-program.js | 26 +++++++++++++++++++ .../__tests__/__snapshots__/index.js.snap | 1 + 2 files changed, 27 insertions(+) diff --git a/packages/gatsby-plugin-gatsby-cloud/src/__tests__/build-headers-program.js b/packages/gatsby-plugin-gatsby-cloud/src/__tests__/build-headers-program.js index c9ec4c6e6d146..93104241b1fec 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/__tests__/build-headers-program.js +++ b/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/`, diff --git a/packages/gatsby/src/redux/__tests__/__snapshots__/index.js.snap b/packages/gatsby/src/redux/__tests__/__snapshots__/index.js.snap index 38b78ae034cf9..5d1c5abb60fcb 100644 --- a/packages/gatsby/src/redux/__tests__/__snapshots__/index.js.snap +++ b/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 { From 99c04e5281db860c9adf958afb8e4a6aefec41f4 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Sat, 22 May 2021 21:26:55 -0700 Subject: [PATCH 4/5] more fixes --- .../src/__tests__/build-headers-program.js | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/packages/gatsby-plugin-netlify/src/__tests__/build-headers-program.js b/packages/gatsby-plugin-netlify/src/__tests__/build-headers-program.js index 8f0c1f16e3e1d..fe4dde30d680f 100644 --- a/packages/gatsby-plugin-netlify/src/__tests__/build-headers-program.js +++ b/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/`, From dc6f154ed2758c335b3a4e1c424bde53736b5bb5 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 24 May 2021 08:40:02 -0700 Subject: [PATCH 5/5] Guard against null values --- .../gatsby-plugin-gatsby-cloud/src/build-headers-program.js | 4 ++-- packages/gatsby-plugin-netlify/src/build-headers-program.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/gatsby-plugin-gatsby-cloud/src/build-headers-program.js b/packages/gatsby-plugin-gatsby-cloud/src/build-headers-program.js index f4c9b860b1a1a..0725b929fccd1 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/build-headers-program.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/build-headers-program.js @@ -277,8 +277,8 @@ const applyCachingHeaders = ( // 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 + const isComponentChunkSet = !!pluginData.components.entries()?.next() + ?.value[1]?.componentChunkName if (isComponentChunkSet) { chunks = [...pluginData.components.values()].map(c => c.componentChunkName) } else { diff --git a/packages/gatsby-plugin-netlify/src/build-headers-program.js b/packages/gatsby-plugin-netlify/src/build-headers-program.js index bfe88eefef032..cdb3fcbe56138 100644 --- a/packages/gatsby-plugin-netlify/src/build-headers-program.js +++ b/packages/gatsby-plugin-netlify/src/build-headers-program.js @@ -310,8 +310,8 @@ const applyCachingHeaders = ( // 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 + const isComponentChunkSet = !!pluginData.components.entries()?.next() + ?.value[1]?.componentChunkName if (isComponentChunkSet) { chunks = [...pluginData.components.values()].map(c => c.componentChunkName) } else {