fix: Restore DNS prefetching for static resources (#1820)

* fix: Restore DNS prefetching for static resources

* fix: CDN paths
feat: preload instead of prefetch for key bundles

* csp

* fix: Turns out prefetch-src is still behind a flag in Chrome, not publicly available yet

server/utils/prefetchTags.js

@@ -2,48 +2,57 @@
 import fs from "fs";
 import path from "path";
 import * as React from "react";
-import webpackConfig from "../../webpack.config";
+import ReactDOMServer from "react-dom/server";
+import env from "../env";
 
-const PUBLIC_PATH = webpackConfig.output.publicPath;
+const prefetchTags = [];
 
-const prefetchTags = [
-  <link
-    rel="dns-prefetch"
-    href={process.env.AWS_S3_UPLOAD_BUCKET_URL}
-    key="dns"
-  />,
-];
+if (process.env.AWS_S3_UPLOAD_BUCKET_URL) {
+  prefetchTags.push(
+    <link
+      rel="dns-prefetch"
+      href={process.env.AWS_S3_UPLOAD_BUCKET_URL}
+      key="dns"
+    />
+  );
+}
 
+let manifestData = {};
 try {
   const manifest = fs.readFileSync(
     path.join(__dirname, "../../app/manifest.json"),
     "utf8"
   );
-  const manifestData = JSON.parse(manifest);
-  Object.values(manifestData).forEach((filename) => {
-    if (typeof filename !== "string") return;
-    if (filename.endsWith(".js")) {
-      prefetchTags.push(
-        <link
-          rel="prefetch"
-          href={`${PUBLIC_PATH}${filename}`}
-          key={filename}
-          as="script"
-        />
-      );
-    } else if (filename.endsWith(".css")) {
-      prefetchTags.push(
-        <link
-          rel="prefetch"
-          href={`${PUBLIC_PATH}${filename}`}
-          key={filename}
-          as="style"
-        />
-      );
-    }
-  });
-} catch (_e) {
-  // no-op
+  manifestData = JSON.parse(manifest);
+} catch (err) {
+  console.warn(err);
 }
 
-export default prefetchTags;
+Object.values(manifestData).forEach((filename) => {
+  if (typeof filename !== "string") return;
+  if (!env.CDN_URL) return;
+
+  if (filename.endsWith(".js")) {
+    //  Preload resources you have high-confidence will be used in the current
+    // page.Prefetch resources likely to be used for future navigations
+    const shouldPreload =
+      filename.includes("/main") ||
+      filename.includes("/runtime") ||
+      filename.includes("/vendors");
+
+    prefetchTags.push(
+      <link
+        rel={shouldPreload ? "preload" : "prefetch"}
+        href={filename}
+        key={filename}
+        as="script"
+      />
+    );
+  } else if (filename.endsWith(".css")) {
+    prefetchTags.push(
+      <link rel="prefetch" href={filename} key={filename} as="style" />
+    );
+  }
+});
+
+export default ReactDOMServer.renderToString(prefetchTags);