Added link=“prefetch” tags

server/pages/components/Layout.js

@@ -5,6 +5,7 @@ import { TopNavigation, BottomNavigation } from './Navigation';
 import Analytics from '../../../shared/components/Analytics';
 import globalStyles from '../../../shared/styles/globals';
 import { color } from '../../../shared/styles/constants';
+import prefetchTags from '../../utils/prefetchTags';
 
 type Props = {
   children?: React$Element<*>,
@@ -40,10 +41,7 @@ export default function Layout({ children }: Props) {
             href="/favicon-32.png"
             sizes="32x32"
           />
-          <link
-            rel="dns-prefetch"
-            href={process.env.AWS_S3_UPLOAD_BUCKET_URL}
-          />
+          {prefetchTags}
         </Helmet>
         <Analytics />
 

server/utils/prefetchTags.js

@@ -0,0 +1,33 @@
+// @flow
+import React from 'react';
+import webpackConfig from '../../webpack.config';
+
+const PUBLIC_PATH = webpackConfig.output.publicPath;
+
+const prefetchTags = [
+  <link rel="dns-prefetch" href={process.env.AWS_S3_UPLOAD_BUCKET_URL} />,
+];
+
+if (process.env.NODE_ENV === 'production') {
+  try {
+    const manifest = require('../../dist/manifest.json');
+    Object.values(manifest).forEach(filename => {
+      if (typeof filename !== 'string') return;
+      if (filename.endsWith('.js')) {
+        prefetchTags.push(
+          <link rel="prefetch" href={`${PUBLIC_PATH}${filename}`} as="script" />
+        );
+      } else if (filename.endsWith('.css')) {
+        prefetchTags.push(
+          <link rel="prefetch" href={`${PUBLIC_PATH}${filename}`} as="style" />
+        );
+      }
+    });
+  } catch (_e) {
+    console.warn(
+      'Warning: Unable to load dist/manifest.json. Please `yarn build` before starting production server'
+    );
+  }
+}
+
+export default prefetchTags;