fix: Restore DNS prefetching for static resources (outline#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

Author: tommoor

package.json

@@ -203,7 +203,7 @@
     "url-loader": "^0.6.2",
     "webpack": "4.44.1",
     "webpack-cli": "^3.3.12",
-    "webpack-manifest-plugin": "^2.2.0"
+    "webpack-manifest-plugin": "^3.0.0"
   },
   "resolutions": {
     "dot-prop": "^5.2.0",

server/app.js

@@ -23,21 +23,21 @@ const isProduction = process.env.NODE_ENV === "production";
 const isTest = process.env.NODE_ENV === "test";
 
 // Construct scripts CSP based on services in use by this installation
+const defaultSrc = ["'self'"];
 const scriptSrc = [
   "'self'",
   "'unsafe-inline'",
   "'unsafe-eval'",
   "gist.github.com",
+  "browser.sentry-cdn.com",
 ];
 
 if (env.GOOGLE_ANALYTICS_ID) {
   scriptSrc.push("www.google-analytics.com");
 }
-if (env.SENTRY_DSN) {
-  scriptSrc.push("browser.sentry-cdn.com");
-}
 if (env.CDN_URL) {
   scriptSrc.push(env.CDN_URL);
+  defaultSrc.push(env.CDN_URL);
 }
 
 app.use(compress());
@@ -167,7 +167,7 @@ app.use(helmet());
 app.use(
   contentSecurityPolicy({
     directives: {
-      defaultSrc: ["'self'"],
+      defaultSrc,
       scriptSrc,
       styleSrc: ["'self'", "'unsafe-inline'", "github.githubassets.com"],
       imgSrc: ["*", "data:", "blob:"],

server/routes.js

@@ -10,6 +10,7 @@ import { languages } from "../shared/i18n";
 import environment from "./env";
 import apexRedirect from "./middlewares/apexRedirect";
 import { opensearchResponse } from "./utils/opensearch";
+import prefetchTags from "./utils/prefetchTags";
 import { robotsResponse } from "./utils/robots";
 
 const isProduction = process.env.NODE_ENV === "production";
@@ -50,6 +51,7 @@ const renderApp = async (ctx, next) => {
   ctx.body = page
     .toString()
     .replace(/\/\/inject-env\/\//g, env)
+    .replace(/\/\/inject-prefetch\/\//g, prefetchTags)
     .replace(/\/\/inject-sentry-dsn\/\//g, process.env.SENTRY_DSN || "")
     .replace(/\/\/inject-slack-app-id\/\//g, process.env.SLACK_APP_ID || "");
 };

server/static/index.html

@@ -4,6 +4,7 @@
     <title>Outline</title>
     <meta name="slack-app-id" content="//inject-slack-app-id//" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    //inject-prefetch//
     <link
       rel="shortcut icon"
       type="image/png"

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);

webpack.config.prod.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 const path = require('path');
 const webpack = require('webpack');
-const ManifestPlugin = require('webpack-manifest-plugin');
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 
 commonWebpackConfig = require('./webpack.config');
@@ -42,7 +42,7 @@ productionWebpackConfig = Object.assign(commonWebpackConfig, {
 
 productionWebpackConfig.plugins = [
   ...productionWebpackConfig.plugins,
-  new ManifestPlugin()
+  new WebpackManifestPlugin()
 ];
 
 module.exports = productionWebpackConfig;

yarn.lock

@@ -7946,7 +7946,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-"lodash@>=3.5 <5", lodash@^4.0.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5:
+lodash@^4.0.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
@@ -8728,7 +8728,7 @@ object.assign@^4.0.4, object.assign@^4.1.0, object.assign@^4.1.1:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
-object.entries@^1.1.0, object.entries@^1.1.2:
+object.entries@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.2.tgz#bc73f00acb6b6bb16c203434b10f9a7e797d3add"
   integrity sha512-BQdB9qKmb/HyNdMNWVr7O3+z5MUIx3aiegEIJqjMBbBf0YT9RRxTJSim4mzFqtyr7PDAHigq0N9dO0m0tRakQA==
@@ -11071,7 +11071,7 @@ sort-keys@^2.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
-source-list-map@^2.0.0:
+source-list-map@^2.0.0, source-list-map@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
@@ -11552,6 +11552,11 @@ tapable@^1.0.0, tapable@^1.1.3:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
+tapable@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.0.tgz#5c373d281d9c672848213d0e037d1c4165ab426b"
+  integrity sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==
+
 tar@^6.0.2:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/tar/-/tar-6.0.5.tgz#bde815086e10b39f1dcd298e89d596e1535e200f"
@@ -12599,15 +12604,13 @@ webpack-hot-middleware@2.x:
     querystring "^0.2.0"
     strip-ansi "^3.0.0"
 
-webpack-manifest-plugin@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.2.0.tgz#19ca69b435b0baec7e29fbe90fb4015de2de4f16"
-  integrity sha512-9S6YyKKKh/Oz/eryM1RyLVDVmy3NSPV0JXMRhZ18fJsq+AwGxUY34X54VNwkzYcEmEkDwNxuEOboCZEebJXBAQ==
+webpack-manifest-plugin@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-3.0.0.tgz#426644300e5dc41a75a9c996c4d4f876eb3c2b5b"
+  integrity sha512-nbORTdky2HxD8XSaaT+zrsHb30AAgyWAWgCLWaAeQO21VGCScGb52ipqlHA/njix1Z8OW8IOlo4+XK0OKr1fkw==
   dependencies:
-    fs-extra "^7.0.0"
-    lodash ">=3.5 <5"
-    object.entries "^1.1.0"
-    tapable "^1.0.0"
+    tapable "^2.0.0"
+    webpack-sources "^2.2.0"
 
 webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
@@ -12617,6 +12620,14 @@ webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
+webpack-sources@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-2.2.0.tgz#058926f39e3d443193b6c31547229806ffd02bac"
+  integrity sha512-bQsA24JLwcnWGArOKUxYKhX3Mz/nK1Xf6hxullKERyktjNMC4x8koOeaDNTA2fEJ09BdWLbM/iTW0ithREUP0w==
+  dependencies:
+    source-list-map "^2.0.1"
+    source-map "^0.6.1"
+
 webpack@4.44.1:
   version "4.44.1"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.1.tgz#17e69fff9f321b8f117d1fda714edfc0b939cc21"