feat: use calculated integrity hashes for local vendor plugins

_config.yml

@@ -347,6 +347,12 @@ calendar:
 # For more information: https://www.w3.org/TR/resource-hints/#preconnect
 preconnect: false
 
+# Performance optimization
+performance:
+  # Lazy-load non-critical CSS (FontAwesome, Fancybox, KaTeX)
+  # This improves Lighthouse scores by making these CSS files non-render-blocking
+  lazy_css: false
+
 # Set the text alignment in posts / pages.
 text_align:
   # Available values: start | end | left | right | center | justify | justify-all | match-parent

layout/_partials/head/head.njk

@@ -48,14 +48,14 @@
 
 {{ next_font() }}
 
-{{ next_vendors('fontawesome') }}
+{{ next_vendors('fontawesome', { lazy: true }) }}
 
 {%- if theme.motion.enable %}
   {{ next_vendors('animate_css') }}
 {%- endif %}
 
 {%- if theme.fancybox %}
-  {{ next_vendors('fancybox_css') }}
+  {{ next_vendors('fancybox_css', { lazy: true }) }}
 {%- endif %}
 
 {%- if theme.pace.enable %}

layout/_third-party/math/katex.njk

@@ -1,4 +1,4 @@
-{{ next_vendors('katex') }}
+{{ next_vendors('katex', { lazy: true }) }}
 {%- if theme.math.katex.copy_tex %}
   {{ next_data('katex', {
     copy_tex_js: theme.vendors.copy_tex_js

scripts/events/lib/vendors.js

@@ -1,55 +1,71 @@
-'use strict';
+"use strict";
 
-const fs = require('fs');
-const path = require('path');
-const yaml = require('js-yaml');
-const { url_for } = require('hexo-util');
-const { getVendors } = require('./utils');
+const fs = require("fs");
+const path = require("path");
+const yaml = require("js-yaml");
+const { url_for } = require("hexo-util");
+const { getVendors } = require("./utils");
 
 let internal;
 try {
-  internal = require('@next-theme/plugins');
-} catch {
-}
-const vendorsFile = fs.readFileSync(path.join(__dirname, '../../../_vendors.yml'));
+  internal = require("@next-theme/plugins");
+} catch {}
+const vendorsFile = fs.readFileSync(
+  path.join(__dirname, "../../../_vendors.yml"),
+);
 const dependencies = yaml.load(vendorsFile);
 
-module.exports = hexo => {
+module.exports = (hexo) => {
   const { vendors, creative_commons, pace } = hexo.theme.config;
-  if (typeof internal === 'function') {
+  if (typeof internal === "function") {
     internal(hexo, dependencies);
   }
-  let { plugins = 'cdnjs' } = vendors;
-  if (plugins === 'local' && typeof internal === 'undefined') {
-    hexo.log.warn('Dependencies for `plugins: local` not found. The default CDN provider CDNJS is used instead.');
-    hexo.log.warn('Run `npm install @next-theme/plugins` in Hexo site root directory to install the plugin.');
-    plugins = 'cdnjs';
+  let { plugins = "cdnjs" } = vendors;
+  if (plugins === "local" && typeof internal === "undefined") {
+    hexo.log.warn(
+      "Dependencies for `plugins: local` not found. The default CDN provider CDNJS is used instead.",
+    );
+    hexo.log.warn(
+      "Run `npm install @next-theme/plugins` in Hexo site root directory to install the plugin.",
+    );
+    plugins = "cdnjs";
   }
   for (const [key, value] of Object.entries(dependencies)) {
     // This script will be executed repeatedly when Hexo listens file changes
     // But the variable vendors[key] only needs to be modified once
-    if (vendors[key] && typeof vendors[key] === 'string') {
+    if (vendors[key] && typeof vendors[key] === "string") {
       vendors[key] = {
-        url: url_for.call(hexo, vendors[key])
+        url: url_for.call(hexo, vendors[key]),
       };
       continue;
     }
-    if (key === 'creative_commons') {
-      value.file = `${value.dir}/${creative_commons.size}/${creative_commons.license.replace(/-/g, '_')}.svg`;
+    if (key === "creative_commons") {
+      value.file = `${value.dir}/${creative_commons.size}/${creative_commons.license.replace(/-/g, "_")}.svg`;
     }
-    if (key === 'pace_css') {
+    if (key === "pace_css") {
       value.file = `${value.dir}/${pace.color}/pace-theme-${pace.theme}.css`;
     }
     const { name, file } = value;
     const links = getVendors({
       ...value,
       minified: file,
-      local   : url_for.call(hexo, `lib/${name}/${file}`),
-      custom  : vendors.custom_cdn_url
+      local: url_for.call(hexo, `lib/${name}/${file}`),
+      custom: vendors.custom_cdn_url,
     });
+
+    // For local plugins, use calculated integrity hash from the plugin
+    // For CDN, use the hardcoded hash from _vendors.yml
+    let integrityHash = value.integrity;
+    if (plugins === "local" && typeof internal === "function") {
+      const localHash = internal.getLocalIntegrity(`lib/${name}/${file}`);
+      if (localHash) {
+        integrityHash = localHash;
+      }
+    }
+
     vendors[key] = {
-      url      : links[plugins] || links.cdnjs,
-      integrity: value.integrity
+      url: links[plugins] || links.cdnjs,
+      integrity: integrityHash,
     };
   }
 };

scripts/helpers/engine.js

@@ -35,13 +35,26 @@ hexo.extend.helper.register('next_js', function(file, {
   return `<script ${pjax ? 'data-pjax ' : ''}${module ? 'type="module" ' : ''}src="${src}" defer></script>`;
 });
 
-hexo.extend.helper.register('next_vendors', function(name) {
+hexo.extend.helper.register('next_vendors', function(name, options = {}) {
   const { url, integrity } = this.theme.vendors[name];
   const type = url.endsWith('css') ? 'css' : 'js';
+  const { lazy = false } = options;
+
   if (type === 'css') {
+    const integrityAttr = integrity ? ` integrity="${integrity}" crossorigin="anonymous"` : '';
+
+    // Lazy-load CSS using preload + onload technique
+    if (lazy && this.theme.performance?.lazy_css) {
+      return `<link rel="preload" href="${url}" as="style" onload="this.onload=null;this.rel='stylesheet'"${integrityAttr}>
+<noscript><link rel="stylesheet" href="${url}"${integrityAttr}></noscript>`;
+    }
+
+    // Default: render-blocking CSS
     if (integrity) return `<link rel="stylesheet" href="${url}" integrity="${integrity}" crossorigin="anonymous">`;
     return `<link rel="stylesheet" href="${url}">`;
   }
+
+  // JS handling unchanged (already uses defer)
   if (integrity) return `<script src="${url}" integrity="${integrity}" crossorigin="anonymous" defer></script>`;
   return `<script src="${url}" defer></script>`;
 });