[Script] Remove next/script code from main bundle unless it's used in a page

packages/next/build/check-next-script-import.ts

@@ -0,0 +1,16 @@
+import { promises } from 'fs'
+import { join } from 'path'
+
+export async function checkNextScriptImport(
+  pagePaths: string[],
+  pagesDir: string
+): Promise<boolean> {
+  for (const page of pagePaths) {
+    const fileContent = await promises.readFile(join(pagesDir, page), 'utf8')
+    if (/import[^}]*.*('|")next\/script('|")/.test(fileContent)) {
+      return true
+    }
+  }
+
+  return false
+}

packages/next/build/index.ts

@@ -79,6 +79,7 @@ import { getPageStaticInfo } from './analysis/get-page-static-info'
 import { createEntrypoints, createPagesMapping } from './entries'
 import { generateBuildId } from './generate-build-id'
 import { isWriteable } from './is-writeable'
+import { checkNextScriptImport } from './check-next-script-import'
 import * as Log from './output/log'
 import createSpinner from './spinner'
 import { trace, flushAllTraces, setGlobal } from '../trace'
@@ -355,6 +356,12 @@ export default async function build(
         await flatReaddir(join(pagesDir, '..'), middlewareDetectionRegExp)
       ).map((absoluteFile) => absoluteFile.replace(dir, ''))
 
+      // Check if any page is importing next/script.
+      // Used in webpack config to define an env variable in order to only include next/script code into main bundle if needed
+      const isNextScriptImported: boolean = await nextBuildSpan
+        .traceChild('is-next-script-imported')
+        .traceAsyncFn(() => checkNextScriptImport(pagePaths, pagesDir))
+
       // needed for static exporting since we want to replace with HTML
       // files
 
@@ -716,6 +723,7 @@ export default async function build(
           buildId,
           config,
           hasReactRoot,
+          isNextScriptImported,
           pagesDir,
           reactProductionProfiling,
           rewrites,

packages/next/build/webpack-config.ts

@@ -324,6 +324,7 @@ export default async function getBaseWebpackConfig(
     dev = false,
     entrypoints,
     hasReactRoot,
+    isNextScriptImported = false,
     isDevFallback = false,
     pagesDir,
     reactProductionProfiling = false,
@@ -338,6 +339,7 @@ export default async function getBaseWebpackConfig(
     dev?: boolean
     entrypoints: webpack5.EntryObject
     hasReactRoot: boolean
+    isNextScriptImported?: boolean
     isDevFallback?: boolean
     pagesDir: string
     reactProductionProfiling?: boolean
@@ -1507,6 +1509,8 @@ export default async function getBaseWebpackConfig(
         'process.env.__NEXT_SCRIPT_WORKERS': JSON.stringify(
           config.experimental.nextScriptWorkers && !dev
         ),
+        'process.env.__NEXT_SCRIPT_IMPORTED':
+          JSON.stringify(isNextScriptImported),
         'process.env.__NEXT_SCROLL_RESTORATION': JSON.stringify(
           config.experimental.scrollRestoration
         ),

packages/next/client/index.tsx

@@ -34,6 +34,7 @@ import { ImageConfigContext } from '../shared/lib/image-config-context'
 import { ImageConfigComplete } from '../shared/lib/image-config'
 import { removeBasePath } from './remove-base-path'
 import { hasBasePath } from './has-base-path'
+import { initalizeScriptLoader } from './initialize-script-loader'
 
 const ReactDOM = process.env.__NEXT_REACT_ROOT
   ? require('react-dom/client')
@@ -252,9 +253,8 @@ export async function initialize(opts: { webpackHMR?: any } = {}): Promise<{
     }
   }
 
-  if (initialData.scriptLoader) {
-    const { initScriptLoader } = require('./script')
-    initScriptLoader(initialData.scriptLoader)
+  if (initialData.scriptLoader && initialData.scriptLoader.length > 0) {
+    initalizeScriptLoader(initialData.scriptLoader)
   }
 
   pageLoader = new PageLoader(initialData.buildId, prefix)

packages/next/client/initialize-script-loader.ts

@@ -0,0 +1,7 @@
+import type { initScriptLoader } from './script'
+
+export const initalizeScriptLoader: typeof initScriptLoader = (...args) => {
+  if (process.env.__NEXT_SCRIPT_IMPORTED) {
+    return require('./script').initScriptLoader(...args)
+  }
+}

packages/next/shared/lib/router/router.ts

@@ -14,7 +14,6 @@ import {
   isAssetError,
   markAssetError,
 } from '../../../client/route-loader'
-import { handleClientScriptLoad } from '../../../client/script'
 import isError, { getProperError } from '../../../lib/is-error'
 import { denormalizePagePath } from '../page-path/denormalize-page-path'
 import { normalizeLocalePath } from '../i18n/normalize-locale-path'
@@ -1255,9 +1254,16 @@ export default class Router implements BaseRouter {
       if (component && component.unstable_scriptLoader) {
         const scripts = [].concat(component.unstable_scriptLoader())
 
-        scripts.forEach((script: any) => {
-          handleClientScriptLoad(script.props)
-        })
+        if (scripts.length > 0) {
+          // Script code should already be present in main bundle if next/script is imported
+          const { handleClientScriptLoad } = await import(
+            /* webpackMode: "weak" */
+            '../../../client/script'
+          )
+          scripts.forEach((script: any) => {
+            handleClientScriptLoad(script.props)
+          })
+        }
       }
 
       // handle redirect on client-transition

packages/next/shared/lib/utils.ts

@@ -6,6 +6,7 @@ import type { IncomingMessage, ServerResponse } from 'http'
 import type { NextRouter } from './router/router'
 import type { ParsedUrlQuery } from 'querystring'
 import type { PreviewData } from 'next/types'
+import type { ScriptProps } from '../../client/script'
 
 export type NextComponentType<
   C extends BaseContext = NextPageContext,
@@ -102,7 +103,7 @@ export type NEXT_DATA = {
   locales?: string[]
   defaultLocale?: string
   domainLocales?: DomainLocale[]
-  scriptLoader?: any[]
+  scriptLoader?: ScriptProps[]
   isPreview?: boolean
   notFoundSrcPage?: string
   rsc?: boolean