prism-js optimization

blog.config.js

@@ -55,6 +55,7 @@ const BLOG = {
   BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
 
   // PrismJs 代码相关
+  PRISM_JS_AUTO_LOADER: 'https://npm.elemecdn.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js',
   PRISM_JS_PATH: 'https://npm.elemecdn.com/prismjs@1.29.0/components/',
   PRISM_THEME_PATH: 'https://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes
   CODE_MAC_BAR: true, // 代码左上角显示mac的红黄绿图标

components/PrismMac.js

@@ -1,13 +1,14 @@
 import React from 'react'
 import Prism from 'prismjs'
+// 所有语言的prismjs 使用autoloader引入
+// import 'prismjs/plugins/autoloader/prism-autoloader'
 import 'prismjs/plugins/toolbar/prism-toolbar'
 import 'prismjs/plugins/toolbar/prism-toolbar.min.css'
 import 'prismjs/plugins/show-language/prism-show-language'
 import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard'
 import 'prismjs/plugins/line-numbers/prism-line-numbers'
 import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
-// 所有语言的prismjs 使用autoloader引入
-import 'prismjs/plugins/autoloader/prism-autoloader'
+
 // mermaid图
 import BLOG from '@/blog.config'
 import { isBrowser, loadExternalResource } from '@/lib/utils'
@@ -18,18 +19,17 @@ import { isBrowser, loadExternalResource } from '@/lib/utils'
  */
 const PrismMac = () => {
   if (isBrowser()) {
-    // setup autoloader
-    if (Prism && Prism.plugins && Prism.plugins.autoloader) {
-      Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
-    }
-    loadExternalResource(BLOG.PRISM_THEME_PATH, 'css')
     if (BLOG.CODE_MAC_BAR) {
       loadExternalResource('/css/prism-mac-style.css', 'css')
     }
+    loadExternalResource(BLOG.PRISM_THEME_PATH, 'css')
+    loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((e) => {
+      Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
+      renderPrismMac()
+    })
   }
 
   React.useEffect(() => {
-    renderPrismMac()
     renderMermaid()
   }, [])
   return <></>