Only track client entry modules in the client reference manifest (#48814

)

This is currently an overhead, that we check a module's layer (`mod.buildInfo.rsc?.type === RSC_MODULE_TYPES.client`) and put all client modules in the client reference manifest, but the manifest is only used for accessing these entry modules. So here we change the util to check if it's an client entry instead.

With this change the client manifest of a test app decreased from 177 KB to 70 KB.

Ref: https://github.com/vercel/next.js/blob/5b609e264f56e6e7c6e230d88ad444650b5b6ba9/packages/next/src/build/analysis/get-page-static-info.ts#L50-L64

packages/next/src/build/webpack/loaders/utils.ts

@@ -1,16 +1,20 @@
 import { createHash } from 'crypto'
-
 import { RSC_MODULE_TYPES } from '../../../shared/lib/constants'
 
 const imageExtensions = ['jpg', 'jpeg', 'png', 'webp', 'avif', 'ico', 'svg']
 const imageRegex = new RegExp(`\\.(${imageExtensions.join('|')})$`)
 
-export function isClientComponentModule(mod: {
+export function isClientComponentEntryModule(mod: {
   resource: string
   buildInfo: any
 }) {
-  const hasClientDirective = mod.buildInfo.rsc?.type === RSC_MODULE_TYPES.client
-  return hasClientDirective || imageRegex.test(mod.resource)
+  const rscInfo = mod.buildInfo.rsc
+  const hasClientDirective = rscInfo?.isClientRef
+  const isActionLayerEntry =
+    rscInfo?.actions && rscInfo?.type === RSC_MODULE_TYPES.client
+  return (
+    hasClientDirective || isActionLayerEntry || imageRegex.test(mod.resource)
+  )
 }
 
 export const regexCSS = /\.(css|scss|sass)(\?.*)?$/

packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts

@@ -26,7 +26,7 @@ import {
 import {
   generateActionId,
   getActions,
-  isClientComponentModule,
+  isClientComponentEntryModule,
   isCSSMod,
 } from '../loaders/utils'
 import { traverseModules, forEachEntryModule } from '../utils'
@@ -521,7 +521,7 @@ export class ClientReferenceEntryPlugin {
       }
       visitedBySegment[entryRequest].add(storeKey)
 
-      const isClientComponent = isClientComponentModule(mod)
+      const isClientComponent = isClientComponentEntryModule(mod)
 
       const actions = getActions(mod)
       if (actions) {

packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts

@@ -12,7 +12,7 @@ import {
   SYSTEM_ENTRYPOINTS,
 } from '../../../shared/lib/constants'
 import { relative, sep } from 'path'
-import { isClientComponentModule, isCSSMod } from '../loaders/utils'
+import { isClientComponentEntryModule, isCSSMod } from '../loaders/utils'
 import { getProxiedPluginState } from '../../build-context'
 
 import { traverseModules } from '../utils'
@@ -212,7 +212,10 @@ export class ClientReferenceManifestPlugin {
 
         // Only apply following logic to client module requests from client entry,
         // or if the module is marked as client module.
-        if (!clientRequestsSet.has(resource) && !isClientComponentModule(mod)) {
+        if (
+          !clientRequestsSet.has(resource) &&
+          !isClientComponentEntryModule(mod)
+        ) {
           return
         }