fix(gatsby): re-add prefetch/preload links for child assets (#29693)

* fix(gatsby): re-add prefetch/preload links for child assets

* test(artifacts): add test for adding <link> tags for webpack's magic comments

integration-tests/artifacts/__tests__/index.js

@@ -396,6 +396,33 @@ describe(`First run (baseline)`, () => {
         manifest[runNumber].allPages.sort()
       )
     })
+
+    describe(`should add <link> for webpack's magic comments`, () => {
+      let htmlContent
+      beforeAll(() => {
+        htmlContent = fs.readFileSync(
+          path.join(
+            process.cwd(),
+            `public`,
+            `dynamic-imports-magic-comments`,
+            `index.html`
+          ),
+          `utf-8`
+        )
+      })
+
+      it(`has prefetch link`, () => {
+        expect(htmlContent).toMatch(
+          /<link\s+as="script"\s+rel="prefetch"\s+href="\/magic-comment-prefetch-\w+.js"\s*\/>/g
+        )
+      })
+
+      it(`has preload link`, () => {
+        expect(htmlContent).toMatch(
+          /<link\s+as="script"\s+rel="preload"\s+href="\/magic-comment-preload-\w+.js"\s*\/>/g
+        )
+      })
+    })
   })
 
   describe(`page-data files`, () => {

integration-tests/artifacts/src/components/magic-comments/prefetch.js

@@ -0,0 +1,3 @@
+export function forPrefetch() {
+  return `export-for-prefetch`
+}

integration-tests/artifacts/src/components/magic-comments/preload.js

@@ -0,0 +1,3 @@
+export function forPreload() {
+  return `export-for-preload`
+}

integration-tests/artifacts/src/pages/dynamic-imports-magic-comments.js

@@ -0,0 +1,17 @@
+import * as React from "react"
+
+import(
+  /* webpackChunkName: "magic-comment-prefetch", webpackPrefetch: true */ `../components/magic-comments/prefetch`
+).then(moduleForPrefetch => {
+  console.log({ forPrefetch: moduleForPrefetch.forPrefetch() })
+})
+
+import(
+  /* webpackChunkName: "magic-comment-preload", webpackPreload: true */ `../components/magic-comments/preload`
+).then(moduleForPreload => {
+  console.log({ forPreload: moduleForPreload.forPreload() })
+})
+
+export default function DynamicImportsWithWebpackMagicComments() {
+  return <div>Sample for dynamic imports with webpack's magic comments</div>
+}

packages/gatsby/src/utils/gatsby-webpack-stats-extractor.ts

@@ -11,6 +11,7 @@ export class GatsbyWebpackStatsExtractor {
     compiler.hooks.done.tapAsync(this.plugin.name, (stats, done) => {
       const assets = {}
       const assetsMap = {}
+      const childAssets = {}
       for (const chunkGroup of stats.compilation.chunkGroups) {
         if (chunkGroup.name) {
           const files: Array<string> = []
@@ -25,11 +26,33 @@ export class GatsbyWebpackStatsExtractor {
                 f.slice(0, chunkGroup.name.length) === chunkGroup.name
             )
             .map(filename => `/${filename}`)
+
+          for (const [rel, childChunkGroups] of Object.entries(
+            chunkGroup.getChildrenByOrders(
+              stats.compilation.moduleGraph,
+              stats.compilation.chunkGraph
+            )
+          )) {
+            if (!(chunkGroup.name in childAssets)) {
+              childAssets[chunkGroup.name] = {}
+            }
+
+            const childFiles = []
+            for (const childChunkGroup of childChunkGroups) {
+              for (const chunk of childChunkGroup.chunks) {
+                childFiles.push(...chunk.files)
+              }
+            }
+
+            childAssets[chunkGroup.name][rel] = childFiles
+          }
         }
       }
+
       const webpackStats = {
         ...stats.toJson({ all: false, chunkGroups: true }),
         assetsByChunkName: assets,
+        childAssetsByChunkName: childAssets,
       }
       fs.writeFile(
         path.join(`public`, `chunk-map.json`),

packages/gatsby/src/utils/worker/render-html.ts

@@ -135,38 +135,29 @@ async function getScriptsAndStylesForTemplate(
       handleAsset(asset, `preload`)
     }
 
-    const namedChunkGroup = webpackStats.namedChunkGroups[chunkName]
-    if (!namedChunkGroup) {
-      continue
-    }
-
-    for (const asset of namedChunkGroup.assets) {
-      handleAsset(asset.name, `preload`)
-    }
-
-    // TODO: figure out childAssets for webpack@5 - there is no longer `childAssets` in webpack.stats.json
     // Handling for webpack magic comments, for example:
     // import(/* webpackChunkName: "<chunk_name>", webpackPrefetch: true */ `<path_to_module>`)
-    // will produce
+    // Shape of webpackStats.childAssetsByChunkName:
     // {
-    //   namedChunkGroups: {
+    //   childAssetsByChunkName: {
     //     <name_of_top_level_chunk>: {
-    //       // [...] some fields we don't care about,
-    //       childAssets: {
-    //         prefetch: [
-    //           "<chunk_name>-<chunk_hash>.js",
-    //           "<chunk_name>-<chunk_hash>.js.map",
-    //         ]
-    //       }
+    //       prefetch: [
+    //         "<chunk_name>-<chunk_hash>.js",
+    //       ]
     //     }
     //   }
     // }
-    // for (const [rel, assets] of Object.entries(namedChunkGroup.childAssets)) {
-    //   // @ts-ignore TS doesn't like that assets is not typed and especially that it doesn't know that it's Iterable
-    //   for (const asset of assets) {
-    //     handleAsset(asset, rel)
-    //   }
-    // }
+    const childAssets = webpackStats.childAssetsByChunkName[chunkName]
+    if (!childAssets) {
+      continue
+    }
+
+    for (const [rel, assets] of Object.entries(childAssets)) {
+      // @ts-ignore TS doesn't like that assets is not typed and especially that it doesn't know that it's Iterable
+      for (const asset of assets) {
+        handleAsset(asset, rel)
+      }
+    }
   }
 
   // create scripts array, making sure "preload" scripts have priority