Improve performance of String.prototype.split uses (#56746)

This PR adds the optional `limit` parameter on String.prototype.split uses.

> If provided, splits the string at each occurrence of the specified separator, but stops when limit entries have been placed in the array. Any leftover text is not included in the array at all.

[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split#syntax)

While the performance gain may not be significant for small texts, it can be huge for large ones.

I made a benchmark on the following repository : https://github.com/Yovach/benchmark-nodejs

On my machine, I get the following results:
`node index.js`
> normal 1: 570.092ms
> normal 50: 2.284s
> normal 100: 3.543s

`node index-optimized.js`
> optmized 1: 644.301ms
> optmized 50: 929.39ms
> optmized 100: 1.020s

The "benchmarks" numbers are : 
- "lorem-1" file contains 1 paragraph of "lorem ipsum"
- "lorem-50" file contains 50 paragraphes of "lorem ipsum"
- "lorem-100" file contains 100 paragraphes of "lorem ipsum"

.github/actions/validate-docs-links/src/index.ts

@@ -189,7 +189,7 @@ async function prepareDocumentMapEntry(
 // Checks if the links point to existing documents
 function validateInternalLink(errors: Errors, href: string): void {
   // /docs/api/example#heading -> ["api/example", "heading""]
-  const [link, hash] = href.replace(DOCS_PATH, '').split('#')
+  const [link, hash] = href.replace(DOCS_PATH, '').split('#', 2)
 
   let foundPage
 

packages/eslint-plugin-next/src/rules/google-font-display.ts

@@ -33,7 +33,7 @@ export = defineRule({
           hrefValue.startsWith('https://fonts.googleapis.com/css')
 
         if (isGoogleFont) {
-          const params = new URLSearchParams(hrefValue.split('?')[1])
+          const params = new URLSearchParams(hrefValue.split('?', 2)[1])
           const displayValue = params.get('display')
 
           if (!params.has('display')) {

packages/eslint-plugin-next/src/rules/no-before-interactive-script-outside-document.ts

@@ -66,7 +66,7 @@ export = defineRule({
           return
         }
 
-        const document = context.getFilename().split('pages')[1]
+        const document = context.getFilename().split('pages', 2)[1]
         if (document && path.parse(document).name.startsWith('_document')) {
           return
         }

packages/eslint-plugin-next/src/rules/no-head-import-in-document.ts

@@ -20,7 +20,7 @@ export = defineRule({
           return
         }
 
-        const document = context.getFilename().split('pages')[1]
+        const document = context.getFilename().split('pages', 2)[1]
         if (!document) {
           return
         }

packages/eslint-plugin-next/src/rules/no-styled-jsx-in-document.ts

@@ -16,7 +16,7 @@ export = defineRule({
   create(context) {
     return {
       JSXOpeningElement(node) {
-        const document = context.getFilename().split('pages')[1]
+        const document = context.getFilename().split('pages', 2)[1]
         if (!document) {
           return
         }

packages/eslint-plugin-next/src/rules/no-typos.ts

@@ -73,7 +73,7 @@ export = defineRule({
     }
     return {
       ExportNamedDeclaration(node) {
-        const page = context.getFilename().split('pages')[1]
+        const page = context.getFilename().split('pages', 2)[1]
         if (!page || path.parse(page).dir.startsWith('/api')) {
           return
         }

packages/eslint-plugin-next/src/utils/url.ts

@@ -43,8 +43,8 @@ export function normalizeURL(url: string) {
   if (!url) {
     return
   }
-  url = url.split('?')[0]
-  url = url.split('#')[0]
+  url = url.split('?', 1)[0]
+  url = url.split('#', 1)[0]
   url = url = url.replace(/(\/index\.html)$/, '/')
   // Empty URLs should not be trailed with `/`, e.g. `#heading`
   if (url === '') {

packages/font/src/google/loader.ts

@@ -95,7 +95,7 @@ const nextFontGoogleFontLoader: FontLoader = async ({
     }
 
     // CSS Variables may be set on a body tag, ignore them to keep the CSS module pure
-    fontFaceDeclarations = fontFaceDeclarations.split('body {')[0]
+    fontFaceDeclarations = fontFaceDeclarations.split('body {', 1)[0]
 
     // Find font files to download, provide the array of subsets we want to preload if preloading is enabled
     const fontFiles = findFontFilesInCss(

packages/font/src/google/sort-fonts-variant-values.ts

@@ -7,8 +7,8 @@ export function sortFontsVariantValues(valA: string, valB: string) {
   // If both values contain commas, it indicates they are in "ital,wght" format
   if (valA.includes(',') && valB.includes(',')) {
     // Split the values into prefix and suffix
-    const [aPrefix, aSuffix] = valA.split(',')
-    const [bPrefix, bSuffix] = valB.split(',')
+    const [aPrefix, aSuffix] = valA.split(',', 2)
+    const [bPrefix, bSuffix] = valB.split(',', 2)
 
     // Compare the prefixes (ital values)
     if (aPrefix === bPrefix) {

packages/next/src/build/webpack/loaders/css-loader/src/plugins/postcss-url-parser.ts

@@ -329,8 +329,7 @@ const plugin = (options: any = {}) => {
                 return parsedDeclaration
               }
 
-              const splittedUrl = url.split(/(\?)?#/)
-              const [pathname, query, hashOrQuery] = splittedUrl
+              const [pathname, query, hashOrQuery] = url.split(/(\?)?#/, 3)
 
               let hash = query ? '?' : ''
               hash += hashOrQuery ? `#${hashOrQuery}` : ''

packages/next/src/build/webpack/loaders/next-app-loader.ts

@@ -178,7 +178,7 @@ async function createTreeCodeFromPath(
   rootLayout: string | undefined
   globalError: string | undefined
 }> {
-  const splittedPath = pagePath.split(/[\\/]/)
+  const splittedPath = pagePath.split(/[\\/]/, 1)
   const isNotFoundRoute = page === '/_not-found'
   const isDefaultNotFound = isAppBuiltinNotFoundPage(pagePath)
   const appDirPrefix = isDefaultNotFound ? APP_DIR_ALIAS : splittedPath[0]

packages/next/src/build/webpack/loaders/next-metadata-route-loader.ts

@@ -16,7 +16,7 @@ type MetadataRouteLoaderOptions = {
 
 export function getFilenameAndExtension(resourcePath: string) {
   const filename = path.basename(resourcePath)
-  const [name, ext] = filename.split('.')
+  const [name, ext] = filename.split('.', 2)
   return { name, ext }
 }
 

packages/next/src/build/webpack/loaders/resolve-url-loader/index.ts

@@ -97,7 +97,7 @@ export default async function resolveUrlLoader(
             (typeof exception === 'string' && exception) ||
               (exception instanceof Error && [
                 exception.message,
-                (exception as any).stack.split('\n')[1].trim(),
+                (exception as any).stack.split('\n', 2)[1].trim(),
               ]) ||
               []
           )

packages/next/src/client/app-link-gc.ts

@@ -13,7 +13,7 @@ export function linkGc() {
               if (link.dataset.precedence?.startsWith('next')) {
                 const href = link.getAttribute('href')
                 if (href) {
-                  const [resource, version] = href.split('?v=')
+                  const [resource, version] = href.split('?v=', 2)
                   if (version) {
                     const currentOrigin = window.location.origin
                     const allLinks = [
@@ -35,7 +35,7 @@ export function linkGc() {
                       if (otherLink.dataset.precedence?.startsWith('next')) {
                         const otherHref = otherLink.getAttribute('href')
                         if (otherHref) {
-                          const [, otherVersion] = otherHref.split('?v=')
+                          const [, otherVersion] = otherHref.split('?v=', 2)
                           if (!otherVersion || +otherVersion < +version) {
                             // Delay the removal of the stylesheet to avoid FOUC
                             // caused by `@font-face` rules, as they seem to be

packages/next/src/client/components/react-dev-overlay/internal/components/Terminal/Terminal.tsx

@@ -8,7 +8,7 @@ export type TerminalProps = { content: string }
 function getFile(lines: string[]) {
   const contentFileName = lines.shift()
   if (!contentFileName) return null
-  const [fileName, line, column] = contentFileName.split(':')
+  const [fileName, line, column] = contentFileName.split(':', 3)
 
   const parsedLine = Number(line)
   const parsedColumn = Number(column)

packages/next/src/client/components/react-dev-overlay/internal/helpers/get-socket-url.ts

@@ -19,7 +19,7 @@ export function getSocketUrl(assetPrefix: string): string {
   }`
 
   if (normalizedAssetPrefix.startsWith('http')) {
-    url = `${protocol}://${normalizedAssetPrefix.split('://')[1]}`
+    url = `${protocol}://${normalizedAssetPrefix.split('://', 2)[1]}`
   }
 
   return url

packages/next/src/client/components/react-dev-overlay/internal/helpers/parse-component-stack.ts

@@ -26,7 +26,7 @@ export function parseComponentStack(
         /^(webpack-internal:\/\/\/|file:\/\/)(\(.*\)\/)?/,
         ''
       )
-      const [file, lineNumber, column] = modulePath?.split(':') ?? []
+      const [file, lineNumber, column] = modulePath?.split(':', 3) ?? []
 
       componentStackFrames.push({
         component,

packages/next/src/client/components/redirect.ts

@@ -104,5 +104,5 @@ export function getRedirectTypeFromError<U extends string>(
     throw new Error('Not a redirect error')
   }
 
-  return error.digest.split(';', 3)[1] as RedirectType
+  return error.digest.split(';', 2)[1] as RedirectType
 }

packages/next/src/client/components/router-reducer/handle-mutable.ts

@@ -41,8 +41,8 @@ export function handleMutable(
           false,
       onlyHashChange:
         !!mutable.hashFragment &&
-        state.canonicalUrl.split('#')[0] ===
-          mutable.canonicalUrl?.split('#')[0],
+        state.canonicalUrl.split('#', 1)[0] ===
+          mutable.canonicalUrl?.split('#', 1)[0],
       hashFragment: shouldScroll
         ? // Empty hash should trigger default behavior of scrolling layout into view.
           // #top is handled in layout-router.

packages/next/src/client/dev/dev-build-watcher.ts

@@ -16,7 +16,7 @@ export default function initializeBuildWatcher(
   position = 'bottom-right'
 ) {
   const shadowHost = document.createElement('div')
-  const [verticalProperty, horizontalProperty] = position.split('-') as [
+  const [verticalProperty, horizontalProperty] = position.split('-', 2) as [
     VerticalPosition,
     HorizonalPosition
   ]

packages/next/src/client/dev/error-overlay/websocket.ts

@@ -71,7 +71,7 @@ export function connectHMR(options: { path: string; assetPrefix: string }) {
     }`
 
     if (assetPrefix.startsWith('http')) {
-      url = `${protocol}://${assetPrefix.split('://')[1]}`
+      url = `${protocol}://${assetPrefix.split('://', 2)[1]}`
     }
 
     source = new window.WebSocket(`${url}${options.path}`)

packages/next/src/client/image-component.tsx

@@ -163,7 +163,7 @@ function handleLoading(
 function getDynamicProps(
   fetchPriority?: string
 ): Record<string, string | undefined> {
-  const [majorStr, minorStr] = version.split('.')
+  const [majorStr, minorStr] = version.split('.', 2)
   const major = parseInt(majorStr, 10)
   const minor = parseInt(minorStr, 10)
   if (major > 18 || (major === 18 && minor >= 3)) {

packages/next/src/client/resolve-href.ts

@@ -39,7 +39,7 @@ export function resolveHref(
     ? urlAsString.slice(urlProtoMatch[0].length)
     : urlAsString
 
-  const urlParts = urlAsStringNoProto.split('?')
+  const urlParts = urlAsStringNoProto.split('?', 1)
 
   if ((urlParts[0] || '').match(/(\/\/|\\)/)) {
     console.error(

packages/next/src/server/app-render/action-handler.ts

@@ -102,7 +102,7 @@ function getForwardedHeaders(
     Array.isArray(rawSetCookies) ? rawSetCookies : [rawSetCookies]
   ).map((setCookie) => {
     // remove the suffixes like 'HttpOnly' and 'SameSite'
-    const [cookie] = `${setCookie}`.split(';')
+    const [cookie] = `${setCookie}`.split(';', 1)
     return cookie
   })
 

packages/next/src/server/base-server.ts

@@ -579,7 +579,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
 
     if (this.i18nProvider) {
       // Remove the port from the hostname if present.
-      const hostname = req?.headers.host?.split(':')[0].toLowerCase()
+      const hostname = req?.headers.host?.split(':', 1)[0].toLowerCase()
 
       const domainLocale = this.i18nProvider.detectDomainLocale(hostname)
       const defaultLocale =
@@ -792,7 +792,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
         return origSetHeader(name, val)
       }
 
-      const urlParts = (req.url || '').split('?')
+      const urlParts = (req.url || '').split('?', 1)
       const urlNoQuery = urlParts[0]
 
       // this normalizes repeated slashes in the path e.g. hello//world ->

packages/next/src/server/future/helpers/i18n-provider.ts

@@ -55,7 +55,7 @@ export class I18NProvider {
       const domain = domainLocale.domain.toLowerCase()
       return {
         defaultLocale: domainLocale.defaultLocale.toLowerCase(),
-        hostname: domain.split(':')[0],
+        hostname: domain.split(':', 1)[0],
         domain,
         locales: domainLocale.locales?.map((locale) => locale.toLowerCase()),
         http: domainLocale.http,
@@ -154,7 +154,7 @@ export class I18NProvider {
 
     // The first segment will be empty, because it has a leading `/`. If
     // there is no further segment, there is no locale (or it's the default).
-    const segments = pathname.split('/')
+    const segments = pathname.split('/', 2)
     if (!segments[1])
       return {
         detectedLocale,

packages/next/src/server/image-optimizer.ts

@@ -294,7 +294,7 @@ export class ImageOptimizerCache {
       const now = Date.now()
 
       for (const file of files) {
-        const [maxAgeSt, expireAtSt, etag, extension] = file.split('.')
+        const [maxAgeSt, expireAtSt, etag, extension] = file.split('.', 4)
         const buffer = await promises.readFile(join(cacheDir, file))
         const expireAt = Number(expireAtSt)
         const maxAge = Number(maxAgeSt)
@@ -373,7 +373,7 @@ function parseCacheControl(str: string | null): Map<string, string> {
     return map
   }
   for (let directive of str.split(',')) {
-    let [key, value] = directive.trim().split('=')
+    let [key, value] = directive.trim().split('=', 2)
     key = key.toLowerCase()
     if (value) {
       value = value.toLowerCase()
@@ -686,13 +686,13 @@ function getFileNameWithExtension(
   url: string,
   contentType: string | null
 ): string {
-  const [urlWithoutQueryParams] = url.split('?')
+  const [urlWithoutQueryParams] = url.split('?', 1)
   const fileNameWithExtension = urlWithoutQueryParams.split('/').pop()
   if (!contentType || !fileNameWithExtension) {
     return 'image.bin'
   }
 
-  const [fileName] = fileNameWithExtension.split('.')
+  const [fileName] = fileNameWithExtension.split('.', 1)
   const extension = getExtension(contentType)
   return `${fileName}.${extension}`
 }

packages/next/src/server/lib/router-utils/resolve-routes.ts

@@ -116,7 +116,7 @@ export function getResolveRoutes(
     let parsedUrl = url.parse(req.url || '', true) as NextUrlWithParsedQuery
     let didRewrite = false
 
-    const urlParts = (req.url || '').split('?')
+    const urlParts = (req.url || '').split('?', 1)
     const urlNoQuery = urlParts[0]
 
     // this normalizes repeated slashes in the path e.g. hello//world ->

packages/next/src/server/lib/utils.ts

@@ -18,7 +18,7 @@ export const getDebugPort = () => {
           localArg.startsWith('--inspect') ||
           localArg.startsWith('--inspect-brk')
       )
-      ?.split('=')[1] ??
+      ?.split('=', 2)[1] ??
     process.env.NODE_OPTIONS?.match?.(/--inspect(-brk)?(=(\S+))?( |$)/)?.[3]
   return debugPortStr ? parseInt(debugPortStr, 10) : 9229
 }

packages/next/src/server/render.tsx

@@ -1547,7 +1547,8 @@ export async function renderToHTMLImpl(
   }
 
   const [renderTargetPrefix, renderTargetSuffix] = documentHTML.split(
-    '<next-js-internal-body-render-target></next-js-internal-body-render-target>'
+    '<next-js-internal-body-render-target></next-js-internal-body-render-target>',
+    2
   )
 
   let prefix = ''

packages/next/src/server/stream-utils/node-web-streams-helper.ts

@@ -426,7 +426,7 @@ export async function continueFizzStream(
   const closeTag = '</body></html>'
 
   // Suffix itself might contain close tags at the end, so we need to split it.
-  const suffixUnclosed = suffix ? suffix.split(closeTag)[0] : null
+  const suffixUnclosed = suffix ? suffix.split(closeTag, 1)[0] : null
 
   if (generateStaticHTML) {
     await renderStream.allReady

packages/next/src/shared/lib/get-hostname.ts

@@ -14,7 +14,7 @@ export function getHostname(
   // hostname.
   let hostname: string
   if (headers?.host && !Array.isArray(headers.host)) {
-    hostname = headers.host.toString().split(':')[0]
+    hostname = headers.host.toString().split(':', 1)[0]
   } else if (parsed.hostname) {
     hostname = parsed.hostname
   } else return

packages/next/src/shared/lib/i18n/detect-domain-locale.ts

@@ -13,7 +13,7 @@ export function detectDomainLocale(
 
   for (const item of domainItems) {
     // remove port if present
-    const domainHostname = item.domain?.split(':')[0].toLowerCase()
+    const domainHostname = item.domain?.split(':', 1)[0].toLowerCase()
     if (
       hostname === domainHostname ||
       detectedLocale === item.defaultLocale.toLowerCase() ||

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

@@ -2219,8 +2219,8 @@ export default class Router implements BaseRouter {
 
   onlyAHashChange(as: string): boolean {
     if (!this.asPath) return false
-    const [oldUrlNoHash, oldHash] = this.asPath.split('#')
-    const [newUrlNoHash, newHash] = as.split('#')
+    const [oldUrlNoHash, oldHash] = this.asPath.split('#', 2)
+    const [newUrlNoHash, newHash] = as.split('#', 2)
 
     // Makes sure we scroll to the provided hash if the url/hash are the same
     if (newHash && oldUrlNoHash === newUrlNoHash && oldHash === newHash) {
@@ -2240,7 +2240,7 @@ export default class Router implements BaseRouter {
   }
 
   scrollToHash(as: string): void {
-    const [, hash = ''] = as.split('#')
+    const [, hash = ''] = as.split('#', 2)
 
     handleSmoothScroll(
       () => {

packages/next/src/shared/lib/router/utils/prepare-destination.ts

@@ -81,7 +81,7 @@ export function matchHas(
       case 'host': {
         const { host } = req?.headers || {}
         // remove port from host if present
-        const hostname = host?.split(':')[0].toLowerCase()
+        const hostname = host?.split(':', 1)[0].toLowerCase()
         value = hostname
         break
       }
@@ -257,7 +257,7 @@ export function prepareDestination(args: {
   try {
     newUrl = destPathCompiler(args.params)
 
-    const [pathname, hash] = newUrl.split('#')
+    const [pathname, hash] = newUrl.split('#', 2)
     parsedDestination.hostname = destHostnameCompiler(args.params)
     parsedDestination.pathname = pathname
     parsedDestination.hash = `${hash ? '#' : ''}${hash || ''}`