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

!nuf
This commit is contained in:
Christian Fehmer 2025-02-19 15:49:03 +01:00 committed by GitHub
parent 8c20b6c4f1
commit cad977ec89
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 88 additions and 1 deletions

View file

@ -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",

View file

@ -1,4 +1,19 @@
<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 +104,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>

View file

@ -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,

46
pnpm-lock.yaml generated
View file

@ -436,6 +436,9 @@ importers:
typescript:
specifier: 5.5.4
version: 5.5.4
unplugin-inject-preload:
specifier: 3.0.0
version: 3.0.0
vite:
specifier: 6.0.11
version: 6.0.11(@types/node@20.14.11)(sass@1.70.0)(terser@5.31.3)(tsx@4.16.2)(yaml@2.5.0)
@ -3154,6 +3157,11 @@ packages:
engines: {node: '>=0.4.0'}
hasBin: true
acorn@8.14.0:
resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
engines: {node: '>=0.4.0'}
hasBin: true
add-stream@1.0.0:
resolution: {integrity: sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==}
@ -6366,6 +6374,7 @@ packages:
lodash.isequal@4.5.0:
resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
deprecated: This package is deprecated. Use require('node:util').isDeepStrictEqual instead.
lodash.isfunction@3.0.9:
resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==}
@ -9147,6 +9156,19 @@ packages:
resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
engines: {node: '>= 0.8'}
unplugin-inject-preload@3.0.0:
resolution: {integrity: sha512-VwHhjdaGo/CISu5ZZhlN74n3ioUjYGgWBwVwzpQjiCybusZajbT+vsL88sxK/xkH5Ypn2QUc1FA01Ne8K6TJHQ==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
html-webpack-plugin: '>=5.0.0'
peerDependenciesMeta:
html-webpack-plugin:
optional: true
unplugin@1.16.1:
resolution: {integrity: sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==}
engines: {node: '>=14.0.0'}
unset-value@1.0.0:
resolution: {integrity: sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==}
engines: {node: '>=0.10.0'}
@ -9500,6 +9522,13 @@ packages:
resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
engines: {node: '>=12'}
webpack-sources@3.2.3:
resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
engines: {node: '>=10.13.0'}
webpack-virtual-modules@0.6.2:
resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
websocket-driver@0.7.4:
resolution: {integrity: sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==}
engines: {node: '>=0.8.0'}
@ -12593,6 +12622,8 @@ snapshots:
acorn@8.12.1: {}
acorn@8.14.0: {}
add-stream@1.0.0: {}
agent-base@6.0.2:
@ -19817,6 +19848,17 @@ snapshots:
unpipe@1.0.0: {}
unplugin-inject-preload@3.0.0:
dependencies:
mime-types: 2.1.35
unplugin: 1.16.1
webpack-sources: 3.2.3
unplugin@1.16.1:
dependencies:
acorn: 8.14.0
webpack-virtual-modules: 0.6.2
unset-value@1.0.0:
dependencies:
has-value: 0.3.1
@ -20264,6 +20306,10 @@ snapshots:
webidl-conversions@7.0.0: {}
webpack-sources@3.2.3: {}
webpack-virtual-modules@0.6.2: {}
websocket-driver@0.7.4:
dependencies:
http-parser-js: 0.5.8