impr: use preload for vendor.css and fonts (@fehmer)

fehmer · fehmer · commit f2ad6d4145f7 · 2025-02-04T13:16:59.000+01:00
diff --git a/frontend/package.json b/frontend/package.json
@@ -58,6 +58,7 @@
     "sass": "1.70.0",
     "subset-font": "2.3.0",
     "typescript": "5.5.4",
+    "unplugin-inject-preload": "3.0.0",
     "vite": "6.0.11",
     "vite-bundle-visualizer": "1.0.1",
     "vite-plugin-checker": "0.7.2",
diff --git a/frontend/src/html/head.html b/frontend/src/html/head.html
@@ -1,4 +1,7 @@
 <head>
+  <link rel="preload" href="/webfonts/RobotoMono-Regular.woff2" type="font/woff2" as="font" crossorigin />
+  <link rel="preload" href="/webfonts/LexendDeca-Regular.woff2" type="font/woff2" as="font" crossorigin />
+
   <script>
     document.addEventListener("keydown", function (e) {
       if (e.key == "Escape") e.preventDefault();
@@ -89,7 +92,6 @@
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="darkreader-lock" />
   <meta http-equiv="Cache-Control" content="no-store" />
-  <link rel="preload" href="styles/vendor.scss" as="style" />
   <link rel="stylesheet" href="styles/vendor.scss" />
   <link rel="stylesheet" href="styles/index.scss" />
 </head>
diff --git a/frontend/vite.config.prod.js b/frontend/vite.config.prod.js
@@ -8,6 +8,8 @@ import { splitVendorChunkPlugin } from "vite";
 import childProcess from "child_process";
 import { checker } from "vite-plugin-checker";
 import { writeFileSync } from "fs";
+// eslint-disable-next-line import/no-unresolved
+import UnpluginInjectPreload from "unplugin-inject-preload/vite";
 
 function pad(numbers, maxLength, fillString) {
   return numbers.map((number) =>
@@ -84,6 +86,7 @@ export default {
     splitVendorChunkPlugin(),
     VitePWA({
       // injectRegister: "networkfirst",
+      injectRegister: "script-defer",
       registerType: "autoUpdate",
       manifest: {
         short_name: "Monkeytype",
@@ -143,6 +146,29 @@ export default {
         },
       },
     ]),
+    UnpluginInjectPreload({
+      files: [
+        {
+          outputMatch: /css\/vendor.*\.css$/,
+          attributes: {
+            as: "style",
+            type: "text/css",
+            rel: "preload",
+            crossorigin: true,
+          },
+        },
+        {
+          outputMatch: /.*\.woff2$/,
+          attributes: {
+            as: "font",
+            type: "font/woff2",
+            rel: "preload",
+            crossorigin: true,
+          },
+        },
+      ],
+      injectTo: "head-prepend",
+    }),
   ],
   build: {
     emptyOutDir: true,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
