From 66c09a462f789f89c66cd33a9f86b4094023fe51 Mon Sep 17 00:00:00 2001 From: Christian Fehmer Date: Tue, 9 Jul 2024 21:23:28 +0200 Subject: [PATCH] impr: reduce initial loading time of settings page (@fehmer) (#5583) --- .gitignore | 1 + frontend/package-lock.json | 1 + frontend/package.json | 1 + frontend/scripts/font-preview.mjs | 55 +++++++++++++++++++++++++++++++ frontend/src/styles/fonts.scss | 14 ++++++++ frontend/src/ts/pages/settings.ts | 2 +- frontend/static/fonts/_list.json | 9 +++-- frontend/vite.config.js | 13 +++++++- 8 files changed, 91 insertions(+), 5 deletions(-) create mode 100644 frontend/scripts/font-preview.mjs diff --git a/.gitignore b/.gitignore index 1d8a09751..d1dfa0145 100644 --- a/.gitignore +++ b/.gitignore @@ -125,3 +125,4 @@ copyAnticheatToDev.sh # ignore generated fonts frontend/src/webfonts-generated +frontend/static/webfonts-preview diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 108ce83e1..dabed03ad 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -53,6 +53,7 @@ "normalize.css": "8.0.1", "postcss": "8.4.27", "sass": "1.70.0", + "subset-font": "2.3.0", "typescript": "5.3.3", "vite": "5.1.2", "vite-bundle-visualizer": "1.0.1", diff --git a/frontend/package.json b/frontend/package.json index 26996a8f4..4ac6a4d9a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -50,6 +50,7 @@ "normalize.css": "8.0.1", "postcss": "8.4.27", "sass": "1.70.0", + "subset-font": "2.3.0", "typescript": "5.3.3", "vite": "5.1.2", "vite-bundle-visualizer": "1.0.1", diff --git a/frontend/scripts/font-preview.mjs b/frontend/scripts/font-preview.mjs new file mode 100644 index 000000000..604412046 --- /dev/null +++ b/frontend/scripts/font-preview.mjs @@ -0,0 +1,55 @@ +import * as fs from "fs"; +import * as path from "path"; +import { fileURLToPath } from "url"; +import Fonts from "../static/fonts/_list.json" assert { type: "json" }; +import subsetFont from "subset-font"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +export async function generatePreviewFonts(debug) { + const srcDir = __dirname + "/../static/webfonts"; + const targetDir = __dirname + "/../static/webfonts-preview"; + fs.mkdirSync(targetDir, { recursive: true }); + + const srcFiles = fs.readdirSync(srcDir); + + for (const font of Fonts) { + if (font.systemFont) continue; + + const display = font.display || font.name; + + const fileNames = srcFiles.filter((it) => + it.startsWith(font.name.replaceAll(" ", "") + "-") + ); + + if (fileNames.length !== 1) + throw new Error( + `cannot find font file for ${font.name}. Candidates: ${fileNames}` + ); + const fileName = fileNames[0]; + + generateSubset( + srcDir + "/" + fileName, + targetDir + "/" + fileName, + display + ); + if (debug) { + console.log( + `Processing ${font.name} with file ${fileName} to display "${display}".` + ); + } + } +} + +async function generateSubset(source, target, name, debug) { + const font = fs.readFileSync(source); + const subset = await subsetFont(font, name, { + targetFormat: "woff2", + }); + fs.writeFileSync(target, subset); +} +//detect if we run this as a main +if (import.meta.url.endsWith(process.argv[1])) { + generatePreviewFonts(true); +} diff --git a/frontend/src/styles/fonts.scss b/frontend/src/styles/fonts.scss index 92fc85722..3f871c5bb 100644 --- a/frontend/src/styles/fonts.scss +++ b/frontend/src/styles/fonts.scss @@ -105,6 +105,11 @@ $font-defauls: ( @each $font, $settings in $fonts { $config: map-merge($font-defauls, $settings); $src: "/webfonts/" + map-get($config, "src") + "." + map-get($config, "ext"); + $previewDir: "webfonts-preview"; + @if variable-exists(previewFontsPath) { + $previewDir: $previewFontsPath; + } + @font-face { font-family: $font; font-style: map-get($config, "style"); @@ -112,4 +117,13 @@ $font-defauls: ( font-display: map-get($config, "display"); src: url($src) format(map-get($config, "format")); } + + @font-face { + font-family: $font + " Preview"; + font-style: map-get($config, "style"); + font-weight: map-get($config, "weight"); + font-display: map-get($config, "display"); + src: url("/" + $previewDir + "/" + map-get($config, "src") + ".woff2") + format("woff2"); + } } diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts index eae94a65b..99999c136 100644 --- a/frontend/src/ts/pages/settings.ts +++ b/frontend/src/ts/pages/settings.ts @@ -636,7 +636,7 @@ async function fillSettingsPage(): Promise { Config.fontFamily === font.name ? " active" : "" }" style="font-family:${ font.display !== undefined ? font.display : font.name - }" data-config-value="${font.name.replace(/ /g, "_")}">${ + } Preview" data-config-value="${font.name.replace(/ /g, "_")}">${ font.display !== undefined ? font.display : font.name }`; } diff --git a/frontend/static/fonts/_list.json b/frontend/static/fonts/_list.json index 6f34dabfa..095947a7e 100644 --- a/frontend/static/fonts/_list.json +++ b/frontend/static/fonts/_list.json @@ -34,7 +34,8 @@ }, { "name": "Comic Sans MS", - "display": "Helvetica" + "display": "Helvetica", + "systemFont": true }, { "name": "Oxygen" @@ -46,7 +47,8 @@ "name": "Itim" }, { - "name": "Courier" + "name": "Courier", + "systemFont": true }, { "name": "Comfortaa" @@ -77,7 +79,8 @@ "name": "Ubuntu Mono" }, { - "name": "Georgia" + "name": "Georgia", + "systemFont": true }, { "name": "Cascadia Mono" diff --git a/frontend/vite.config.js b/frontend/vite.config.js index 4ebb048ac..064950565 100644 --- a/frontend/vite.config.js +++ b/frontend/vite.config.js @@ -10,6 +10,7 @@ import autoprefixer from "autoprefixer"; import "dotenv/config"; import { fontawesomeSubset } from "fontawesome-subset"; import { getFontawesomeConfig } from "./scripts/fontawesome.mjs"; +import { generatePreviewFonts } from "./scripts/font-preview.mjs"; function pad(numbers, maxLength, fillString) { return numbers.map((number) => @@ -146,7 +147,10 @@ const DEV_CONFIG = { css: { preprocessorOptions: { scss: { - additionalData: `$fontAwesomeOverride:"@fortawesome/fontawesome-free/webfonts";`, + additionalData: ` + $fontAwesomeOverride:"@fortawesome/fontawesome-free/webfonts"; + $previewFontsPath:"webfonts"; + `, }, }, }, @@ -165,6 +169,13 @@ const BUILD_CONFIG = { }); }, }, + { + name: "vite-plugin-webfonts-preview", + apply: "build", + buildStart() { + generatePreviewFonts(); + }, + }, splitVendorChunkPlugin(), VitePWA({ injectRegister: "networkfirst",