gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-07-27 12:29:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(website): add SRI to scripts & styles and optimize hero image preload

Browse Source
This commit is contained in:
KoalaDev
2026-07-09 05:06:35 +02:00
parent 71fdea78f3
commit 6aa42668e9
2 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/build.cjs
+11 -7
View File
@@ -30,6 +30,7 @@ function copyDirSync(src, dest) {
}
function sha8(buf) { return crypto.createHash('sha256').update(buf).digest('hex').slice(0, 8); }
function sha384(buf) { return 'sha384-' + crypto.createHash('sha384').update(buf).digest('base64'); }
async function minifyJS(raw) {
const result = await esbuild.transform(raw, {
@@ -135,16 +136,19 @@ async function compile() {
const styleMin = minifyCSS(styleRaw);
const styleHash = sha8(styleMin);
const styleName = `style.${styleHash}.min.css`;
const styleSRI = sha384(styleMin);
const appRaw = fs.readFileSync(path.join(websiteDir, 'app.js'), 'utf8');
const appMin = await minifyJS(appRaw);
const appHash = sha8(appMin);
const appName = `app.${appHash}.min.js`;
const appSRI = sha384(appMin);
const langRaw = fs.readFileSync(path.join(websiteDir, 'lang-init.js'), 'utf8');
const langMin = await minifyJS(langRaw);
const langHash = sha8(langMin);
const langName = `lang-init.${langHash}.min.js`;
const langSRI = sha384(langMin);
const stylePct = ((1 - styleMin.length / styleRaw.length) * 100).toFixed(0);
const appPct = ((1 - appMin.length / appRaw.length) * 100).toFixed(0);
@@ -452,15 +456,15 @@ async function compile() {
walkHtml(wwwDir, (filePath) => {
let html = fs.readFileSync(filePath, 'utf8');
// 8a. Replace hashed asset refs
html = html.replace(/href="((?:\.\.\/)*)style\.min\.css"/g, (m, prefix) => {
return `href="${prefix}${styleName}"`;
// 8a. Replace hashed asset refs and inject SRI (Subresource Integrity)
html = html.replace(/(<link\b[^>]*?\bhref=")((?:\.\.\/)*)style\.min\.css"/g, (m, before, prefix) => {
return `${before}${prefix}${styleName}" integrity="${styleSRI}" crossorigin="anonymous"`;
});
html = html.replace(/src="((?:\.\.\/)*)app\.min\.js"/g, (m, prefix) => {
return `src="${prefix}${appName}"`;
html = html.replace(/(<script\b[^>]*?\bsrc=")((?:\.\.\/)*)app\.min\.js"/g, (m, before, prefix) => {
return `${before}${prefix}${appName}" integrity="${appSRI}" crossorigin="anonymous"`;
});
html = html.replace(/src="((?:\.\.\/)*)lang-init\.min\.js"/g, (m, prefix) => {
return `src="${prefix}${langName}"`;
html = html.replace(/(<script\b[^>]*?\bsrc=")((?:\.\.\/)*)lang-init\.min\.js"/g, (m, before, prefix) => {
return `${before}${prefix}${langName}" integrity="${langSRI}" crossorigin="anonymous"`;
});
// 8b. Inject AVIF <picture> wrappers
website/template.html
+5 -1
View File
@@ -6,8 +6,12 @@
<title>{{META_TITLE}}</title>
<meta name="description" content="{{META_DESCRIPTION}}">
<link rel="dns-prefetch" href="https://chromewebstore.google.com">
<link rel="dns-prefetch" href="https://addons.mozilla.org">
<link rel="dns-prefetch" href="https://github.com">
<link rel="preload" href="{{ASSET_PATH}}style.min.css" as="style">
<link rel="preload" as="image" href="{{ASSET_PATH}}assets/LookDownKoala.webp" imagesrcset="{{ASSET_PATH}}assets/LookDownKoala-1x.webp 90w, {{ASSET_PATH}}assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="preload" as="image" href="{{ASSET_PATH}}assets/LookDownKoala.avif" imagesrcset="{{ASSET_PATH}}assets/LookDownKoala-1x.avif 90w, {{ASSET_PATH}}assets/LookDownKoala.avif 205w" imagesizes="90px" type="image/avif" fetchpriority="high">
<link rel="stylesheet" href="{{ASSET_PATH}}style.min.css">
<link rel="icon" type="image/png" sizes="16x16" href="{{ASSET_PATH}}assets/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="{{ASSET_PATH}}assets/favicon-32x32.png">