chore: Add preload-webpack-plugin. (signalstickers#294)

Author: darkobits

babel.config.js

@@ -9,5 +9,8 @@ module.exports = {
   ],
   plugins: [
     'react-hot-loader/babel'
-  ]
+  ],
+  // Ensures Webpack comments are not prematurely removed by Babel. Comments
+  // will still be stripped by the minifier in production builds.
+  comments: true
 };

config/webpack.config.babel.ts

@@ -7,6 +7,8 @@ import FaviconsWebpackPlugin from 'favicons-webpack-plugin';
 import FriendlyErrorsWebpackPlugin from 'friendly-errors-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+// @ts-expect-error No declarations exist for this plugin.
+import PreloadWebpackPlugin from 'preload-webpack-plugin';
 import * as R from 'ramda';
 import webpack from 'webpack';
 import { FaviconWebpackPlugionOptions } from 'favicons-webpack-plugin/src/options';
@@ -231,8 +233,14 @@ export default (env: string, argv: any): webpack.Configuration => {
     inject: true
   }));
 
+  // Add resource hints to preload assets used in the initial chunk. This plugin
+  // must be added after html-webpack-plugin.
+  config.plugins.push(new PreloadWebpackPlugin({
+    include: ['home']
+  }));
+
   config.plugins.push(new MiniCssExtractPlugin({
-    filename: argv.mode === 'production' ? 'styles-[contenthash].css' : 'styles.css'
+    filename: argv.mode === 'production' ? '[name]-[contenthash].css' : 'styles.css'
   }));
 
   config.plugins.push(new webpack.LoaderOptionsPlugin({

package-lock.json

@@ -98,6 +98,7 @@
     "json-loader": "^0.5.7",
     "mini-css-extract-plugin": "^0.9.0",
     "modernizr-loader": "^1.0.1",
+    "preload-webpack-plugin": "^3.0.0-beta.3",
     "raw-loader": "^4.0.1",
     "react-hot-loader": "^4.12.21",
     "style-loader": "^1.2.1",

package.json

@@ -21,10 +21,25 @@ import {
 
 
 // Note: Each top-level route should be imported az a lazy-loaded component.
-const About = React.lazy(async () => import('components/about/About'));
-const Contribute = React.lazy(async () => import('components/contribute/Contribute'));
-const Home = React.lazy(async () => import('components/home/Home'));
-const Pack = React.lazy(async () => import('components/pack/StickerPackDetail'));
+const Home = React.lazy(async () => import(
+  /* webpackChunkName: "home" */
+  'components/home/Home'
+));
+
+const Pack = React.lazy(async () => import(
+  /* webpackChunkName: "detail" */
+  'components/pack/StickerPackDetail'
+));
+
+const Contribute = React.lazy(async () => import(
+  /* webpackChunkName: "contribute" */
+  'components/contribute/Contribute'
+));
+
+const About = React.lazy(async () => import(
+  /* webpackChunkName: "about" */
+  'components/about/About'
+));
 
 
 // ----- Styles ----------------------------------------------------------------

src/components/layout/AppLayout.tsx

@@ -11,7 +11,7 @@
     <meta name="twitter:site" content="@signalstickers" />
     <meta property="og:description" content="Community-organized gallery of sticker packs for Signal. Browse more than 1500 stickers, and propose your own!" />
     <meta property="og:image" content="https://raw.githubusercontent.com/signalstickers/signalstickers/master/src/assets/favicon.png" />
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700&display=block" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700" crossorigin="anonymous"  />
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
     <!-- Start Single Page Apps for GitHub Pages -->
     <script type="text/javascript">
@@ -44,6 +44,10 @@
       }(window.location))
     </script>
     <!-- End Single Page Apps for GitHub Pages -->
+
+    <!-- Resource Hints -->
+    <link rel="preconnect" href="https://cdn-ca.signal.org" crossorigin="anonymous" />
+    <link rel="preconnect" href="https://ping.signalstickers.com" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>