perf: More selective resource pre-fetching

app/components/Editor.tsx

@@ -32,7 +32,7 @@ import DocumentBreadcrumb from "./DocumentBreadcrumb";
 const LazyLoadedEditor = React.lazy(
   () =>
     import(
-      /* webpackChunkName: "shared-editor" */
+      /* webpackChunkName: "preload-shared-editor" */
       "~/editor"
     )
 );

app/routes/authenticated.tsx

@@ -26,7 +26,7 @@ const SettingsRoutes = React.lazy(
 const Document = React.lazy(
   () =>
     import(
-      /* webpackChunkName: "document" */
+      /* webpackChunkName: "preload-document" */
       "~/scenes/Document"
     )
 );

app/routes/index.tsx

@@ -8,14 +8,14 @@ import { matchDocumentSlug as slug } from "~/utils/routeHelpers";
 const Authenticated = React.lazy(
   () =>
     import(
-      /* webpackChunkName: "authenticated" */
+      /* webpackChunkName: "preload-authenticated" */
       "~/components/Authenticated"
     )
 );
 const AuthenticatedRoutes = React.lazy(
   () =>
     import(
-      /* webpackChunkName: "authenticated-routes" */
+      /* webpackChunkName: "preload-authenticated-routes" */
       "./authenticated"
     )
 );

app/scenes/Document/components/AsyncMultiplayerEditor.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 const MultiplayerEditor = React.lazy(
   () =>
     import(
-      /* webpackChunkName: "multiplayer-editor" */
+      /* webpackChunkName: "preload-multiplayer-editor" */
       "./MultiplayerEditor"
     )
 );

server/utils/prefetchTags.tsx

@@ -28,7 +28,6 @@ try {
   // no-op
 }
 
-let index = 0;
 Object.values(manifestData).forEach((filename) => {
   if (typeof filename !== "string") {
     return;
@@ -43,18 +42,11 @@ Object.values(manifestData).forEach((filename) => {
     const shouldPreload =
       filename.includes("/main") ||
       filename.includes("/runtime") ||
-      filename.includes("/vendors");
-    // only prefetch the first few javascript chunks or it gets out of hand fast
-    const shouldPrefetch = ++index <= 6;
+      filename.includes("preload-");
 
-    if (shouldPreload || shouldPrefetch) {
+    if (shouldPreload) {
       prefetchTags.push(
-        <link
-          rel={shouldPreload ? "preload" : "prefetch"}
-          href={filename}
-          key={filename}
-          as="script"
-        />
+        <link rel="preload" href={filename} key={filename} as="script" />
       );
     }
   } else if (filename.endsWith(".css")) {