``` /** * inject-resource-hints.js * * 零依赖 Node.js 脚本：扫描 dist 目录，自动向 HTML 注入 Resource Hints。 * * 支持： * dns-prefetch — 外部域名 DNS 预解析（成本最低，自动提取） * preconnect — 关键第三方源 TCP/TLS 预热（手动指定 + 自动升级） * preload — CSS 中 @font-face 字体文件（crossorigin 必须） * prefetch — 动态 import() 异步 chunk（懒加载路由） * prerender — 几乎必然访问的下一页（谨慎使用） * * 运行：node inject-resource-hints.js * 在 package.json 中： "postbuild": "node inject-resource-hints.js" */ 'use strict'; const fs = require('fs'); const path = require('path'); // ╔══════════════════════════════════════════════════════════════════════════╗ // ║ ← 配置区，按需修改 → ║ // ╚══════════════════════════════════════════════════════════════════════════╝ const CONFIG = { /** dist 目录（相对于脚本所在位置） */ distDir: 'apps/admin/dist', // ── preconnect ──────────────────────────────────────────────────────── // 需要 TCP/TLS 预热的关键域名（同时自动生成 dns-prefetch 作为 fallback） // crossorigin: true → 字体、ES 模块等跨域资源必须加，否则浏览器建两条连接 preconnect: [ // { href: 'https://api.example.com' }, // { href: 'https://fonts.gstatic.com', crossorigin: true }, ], // ── dns-prefetch（仅 DNS，不建连接）────────────────────────────────── // 手动添加非关键第三方域名（脚本也会自动发现更多） dnsPrefetch: [ // 'https://cdn.example.com', ], // ── prerender ──────────────────────────────────────────────────────── // 几乎必然访问的下一页（资源消耗极大，留空则不注入） prerender: '', // ── 自动化开关 ──────────────────────────────────────────────────────── /** 自动扫描 JS/CSS，提取外部域名 → dns-prefetch */ autoDnsPrefetch: true, /** 满足以下正则的自动发现域名会升级为 preconnect */ autoCriticalPatterns: [ // /cdn\.myapp\.com/, ], /** 自动扫描动态 import() 的 chunk → prefetch */ autoPrefetchChunks: true, /** 自动提取 CSS @font-face 字体 → preload */ autoPreloadFonts: true, }; // ══════════════════════════════════════════════════════════════════════════ // ─── ANSI 颜色 ───────────────────────────────────────────────────────────── const C = { reset : '\x1b[0m', bold : '\x1b[1m', dim : '\x1b[2m', green : '\x1b[32m', yellow: '\x1b[33m', cyan : '\x1b[36m', red : '\x1b[31m', blue : '\x1b[34m', gray : '\x1b[90m', }; const ok = (s) => `${C.green}✔${C.reset} ${s}`; const warn = (s) => `${C.yellow}⚠${C.reset} ${s}`; const err = (s) => `${C.red}✖${C.reset} ${s}`; const info = (s) => `${C.cyan}ℹ${C.reset} ${s}`; const dim = (s) => `${C.gray}${s}${C.reset}`; const bold = (s) => `${C.bold}${s}${C.reset}`; // ─── 文件遍历（内置实现，无需 glob 包）──────────────────────────────────── function walkFiles(dir, extRe) { const results = []; if (!fs.existsSync(dir)) return results; (function walk(cur) { for (const entry of fs.readdirSync(cur, { withFileTypes: true })) { const full = path.join(cur, entry.name); if (entry.isDirectory()) { walk(full); } else if (extRe.test(entry.name)) { results.push(full); } } })(dir); return results; } // ─── 正则 ────────────────────────────────────────────────────────────────── const EXTERNAL_ORIGIN_RE = /https?:\/\/([a-z0-9\-._]+)/gi; const FONT_FACE_BLOCK_RE = /@font-face\s*\{([^}]*)\}/g; const FONT_URL_RE = /url$\s*['"]?([^'")]+\.(woff2?|ttf|otf|eot)[^'")]*?)['"]?\s*$/gi; const DYNAMIC_IMPORT_RE = /(?:import|require\.ensure)\(\s*['"`]([^'"`]+\.js[^'"`]*)['"`]/g; const SCRIPT_SRC_RE = /]+src=["']([^"']+\.js[^"']*)["']/gi; const MODULE_PRELOAD_RE = /]+rel=["']modulepreload["'][^>]+href=["']([^"']+)["']/gi; const FONT_MIME = { woff2: 'font/woff2', woff : 'font/woff', ttf : 'font/ttf', otf : 'font/otf', eot : 'application/vnd.ms-fontobject', }; // ─── 工具函数 ────────────────────────────────────────────────────────────── function isLocal(host) { return ( host === 'localhost' || /^127\./.test(host) || /^192\.168\./.test(host) || /^10\./.test(host) || /^172\.(1[6-9]|2\d|3[01])\./.test(host) || host.endsWith('.local') ); } function toOrigin(url) { try { const u = new URL(url.startsWith('http') ? url : `https://${url}`); return u.origin; } catch { return null; } } /** 从源码提取所有外部 https 域名 */ function extractOrigins(source) { const set = new Set(); let m; EXTERNAL_ORIGIN_RE.lastIndex = 0; while ((m = EXTERNAL_ORIGIN_RE.exec(source)) !== null) { if (!isLocal(m[1])) set.add(`https://${m[1]}`); } return set; } /** 从 CSS 提取 @font-face 字体 URL */ function extractFonts(css) { const fonts = []; let fb; FONT_FACE_BLOCK_RE.lastIndex = 0; while ((fb = FONT_FACE_BLOCK_RE.exec(css)) !== null) { const block = fb[1]; let um; FONT_URL_RE.lastIndex = 0; while ((um = FONT_URL_RE.exec(block)) !== null) { const rawUrl = um[1].trim(); const ext = (rawUrl.match(/\.(woff2?|ttf|otf|eot)/i) || [])[1]?.toLowerCase() ?? ''; fonts.push({ href: rawUrl, type: FONT_MIME[ext] ?? '' }); } } return fonts; } /** 从 JS 提取 import('xxx.js') 中的路径 */ function extractDynamicImports(js) { const paths = new Set(); let m; DYNAMIC_IMPORT_RE.lastIndex = 0; while ((m = DYNAMIC_IMPORT_RE.exec(js)) !== null) { paths.add(m[1]); } return paths; } /** 生成单条标签字符串 */ function linkTag(attrs) { const parts = Object.entries(attrs) .filter(([, v]) => v !== undefined && v !== false && v !== '') .map(([k, v]) => v === true ? k : `${k}="${v}"`); return ``; } /** 向 HTML 开头注入内容（字符串操作，无需解析器） */ function injectAfterHead(html, linksHtml) { if (/]*)?>/.test(html)) { return html.replace(/(]*)?>)/, `$1\n${linksHtml}`); } // 没有时降级处理 console.log(warn('没有找到标签，降级注入到之后')); return html.replace(/(]*)?>)/, `$1\n\n${linksHtml}\n`); } // ─── 主流程 ──────────────────────────────────────────────────────────────── async function main() { const distDir = path.resolve(__dirname, CONFIG.distDir); console.log(`\n${bold('Resource Hints Auto-Injector')}\n`); console.log(info(`扫描目录：${dim(distDir)}\n`)); if (!fs.existsSync(distDir)) { console.error(err(`dist 目录不存在：${distDir}`)); console.error(dim(' 请先执行 build 命令再运行此脚本。')); process.exit(1); } // ── 1. 收集文件 ────────────────────────────────────────────────────── const htmlFiles = walkFiles(distDir, /\.html$/i); const jsFiles = walkFiles(distDir, /\.js$/i); const cssFiles = walkFiles(distDir, /\.css$/i); console.log(dim(` HTML ${htmlFiles.length} 个 JS ${jsFiles.length} 个 CSS ${cssFiles.length} 个\n`)); if (htmlFiles.length === 0) { console.error(err('未找到任何 HTML 文件，退出。')); process.exit(1); } // ── 2. 从 HTML 获取入口脚本 & 已有 modulepreload ───────────────────── const entryScriptPaths = new Set(); // 相对 distDir 的路径 const existingPreloads = new Set(); // 已有 modulepreload，不重复 prefetch for (const f of htmlFiles) { const html = fs.readFileSync(f, 'utf8'); let m; SCRIPT_SRC_RE.lastIndex = 0; while ((m = SCRIPT_SRC_RE.exec(html)) !== null) { entryScriptPaths.add(m[1].replace(/^\//, '')); } MODULE_PRELOAD_RE.lastIndex = 0; while ((m = MODULE_PRELOAD_RE.exec(html)) !== null) { existingPreloads.add(m[1].replace(/^\//, '')); } } // ── 3. 从入口脚本提取动态 import → prefetch ────────────────────────── const prefetchChunks = new Set(); // href 相对路径（加 / 前缀） if (CONFIG.autoPrefetchChunks) { for (const rel of entryScriptPaths) { const abs = path.join(distDir, rel); if (!fs.existsSync(abs)) continue; const js = fs.readFileSync(abs, 'utf8'); for (const rawPath of extractDynamicImports(js)) { // 解析成相对 distDir 的路径 const resolved = path.relative( distDir, path.resolve(path.dirname(abs), rawPath), ).replace(/\\/g, '/'); if (!existingPreloads.has(resolved) && fs.existsSync(path.join(distDir, resolved))) { prefetchChunks.add('/' + resolved); } } } } // ── 4. 提取字体 preload ─────────────────────────────────────────────── const fontPreloads = []; const seenFonts = new Set(); if (CONFIG.autoPreloadFonts) { for (const f of cssFiles) { const css = fs.readFileSync(f, 'utf8'); for (const font of extractFonts(css)) { const key = font.href; if (!seenFonts.has(key)) { seenFonts.add(key); fontPreloads.push(font); } } } } // ── 5. 自动扫描外部域名 ─────────────────────────────────────────────── const autoDomains = new Set(); if (CONFIG.autoDnsPrefetch) { for (const f of [...jsFiles, ...cssFiles]) { const src = fs.readFileSync(f, 'utf8'); for (const d of extractOrigins(src)) autoDomains.add(d); } } // ── 6. 合并 preconnect / dns-prefetch 集合 ─────────────────────────── const preconnectEntries = (CONFIG.preconnect || []).map((e) => typeof e === 'string' ? { href: e } : e, ); const preconnectOrigins = new Set( preconnectEntries.map((e) => toOrigin(e.href)).filter(Boolean), ); const dnsPrefetchOrigins = new Set( (CONFIG.dnsPrefetch || []).map(toOrigin).filter(Boolean), ); for (const domain of autoDomains) { if (preconnectOrigins.has(domain) || dnsPrefetchOrigins.has(domain)) continue; const upgrade = (CONFIG.autoCriticalPatterns || []).some((re) => re.test(domain)); if (upgrade) { preconnectOrigins.add(domain); preconnectEntries.push({ href: domain }); } else { dnsPrefetchOrigins.add(domain); } } // preconnect 域名从 dns-prefetch 集移除（避免重复） for (const o of preconnectOrigins) dnsPrefetchOrigins.delete(o); // ── 7. 构建标签列表 ─────────────────────────────────────────────────── // 顺序：dns-prefetch → preconnect → preload(font) → prefetch → prerender const tags = []; for (const origin of dnsPrefetchOrigins) { tags.push(linkTag({ rel: 'dns-prefetch', href: origin })); } for (const { href, crossorigin } of preconnectEntries) { const origin = toOrigin(href); if (!origin) continue; // dns-prefetch 作为 fallback（旧浏览器） tags.push(linkTag({ rel: 'dns-prefetch', href: origin })); // preconnect 正式 tags.push(linkTag({ rel : 'preconnect', href : origin, crossorigin: crossorigin ? 'anonymous' : undefined, })); } for (const { href, type } of fontPreloads) { tags.push(linkTag({ rel : 'preload', href, as : 'font', type : type || undefined, crossorigin: 'anonymous', })); } for (const chunkHref of prefetchChunks) { tags.push(linkTag({ rel : 'prefetch', href : chunkHref, as : 'script', crossorigin: 'anonymous', })); } if (CONFIG.prerender) { tags.push(linkTag({ rel: 'prerender', href: CONFIG.prerender })); } if (tags.length === 0) { console.log(warn('未生成任何 hint 标签（可能 dist 为空或外部引用极少）。')); return; } // ── 8. 注入每个 HTML ────────────────────────────────────────────────── const linksBlock = ' ' + tags.join('\n '); for (const file of htmlFiles) { const original = fs.readFileSync(file, 'utf8'); // 幂等检查：避免重复注入 if (original.includes('data-rh-injected')) { console.log(warn(`已注入过，跳过：${dim(path.relative(process.cwd(), file))}`)); continue; } const injected = injectAfterHead(original, '\n' + linksBlock); fs.writeFileSync(file, injected, 'utf8'); console.log(ok(`${path.relative(process.cwd(), file)}`)); } // ── 9. 汇总报告 ─────────────────────────────────────────────────────── const counts = { 'dns-prefetch' : dnsPrefetchOrigins.size + preconnectEntries.length, // preconnect 也带 dns-prefetch 'preconnect' : preconnectEntries.length, 'preload(font)': fontPreloads.length, 'prefetch' : prefetchChunks.size, 'prerender' : CONFIG.prerender ? 1 : 0, }; console.log(`\n${'─'.repeat(46)}`); console.log(bold('注入汇总')); for (const [rel, count] of Object.entries(counts)) { const bar = '█'.repeat(Math.min(count, 20)); console.log(` ${rel.padEnd(16)} ${String(count).padStart(3)} 个 ${C.cyan}${bar}${C.reset}`); } console.log(`${'─'.repeat(46)}`); console.log(` 总标签数：${bold(tags.length)} 个`); console.log(`${'─'.repeat(46)}\n`); // ── 10. 打印注入的所有标签（便于审查）─────────────────────────────── console.log(bold('生成的标签（按顺序）：\n')); for (const tag of tags) { const rel = (tag.match(/rel="([^"]+)"/) || [])[1] ?? ''; const color = { 'dns-prefetch': C.gray, preconnect : C.blue, preload : C.green, prefetch : C.yellow, prerender : C.red, }[rel] ?? ''; console.log(` ${color}${tag}${C.reset}`); } console.log(''); } main().catch((e) => { console.error(err('脚本执行失败：'), e); process.exit(1); }); ```