perf: don't add more preload components when we're fetching > 4

packages/nuxt/src/app/components/nuxt-link.ts

@@ -329,21 +329,30 @@ function isSlowConnection () {
   return false
 }
 
-async function preloadRouteComponents (to: string, router: Router & { _nuxtLinkPreloaded?: Set<string> } = useRouter()) {
+async function preloadRouteComponents (to: string, router: Router & { _nuxtLinkPreloaded?: Set<string>; _preloadPromises?: Array<Promise<any>> } = useRouter()): Promise<void> {
   if (process.server) { return }
 
   if (!router._nuxtLinkPreloaded) { router._nuxtLinkPreloaded = new Set() }
   if (router._nuxtLinkPreloaded.has(to)) { return }
   router._nuxtLinkPreloaded.add(to)
 
+  const promises = router._preloadPromises ||= []
+
+  if (promises.length > 4) {
+    // Defer adding new preload requests until the existing ones have resolved
+    return Promise.all(promises).then(() => preloadRouteComponents(to, router))
+  }
+
   const components = router.resolve(to).matched
     .map(component => component.components?.default)
     .filter(component => typeof component === 'function')
 
-  const promises: Promise<any>[] = []
   for (const component of components) {
-    const promise = Promise.resolve((component as Function)()).catch(() => {})
+    const promise = Promise.resolve((component as Function)())
+      .catch(() => {})
+      .finally(() => promises.splice(promises.indexOf(promise)))
     promises.push(promise)
   }
+
   await Promise.all(promises)
 }