perf: More selective resource pre-fetching

This commit is contained in:
Tom Moor
2022-09-11 15:14:03 +01:00
parent 2c5b18c76b
commit 0587968f8b
5 changed files with 8 additions and 16 deletions

View File

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

View File

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

View File

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

View File

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

View File

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