fix performance

components/Live2D.js

@@ -2,19 +2,25 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { loadExternalResource } from '@/lib/utils'
-import React from 'react'
+import { useEffect } from 'react'
 
 export default function Live2D() {
-  const { switchTheme } = useGlobal()
+  const { theme, switchTheme } = useGlobal()
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (BLOG.WIDGET_PET) {
-      window.addEventListener('scroll', initLive2D)
-      return () => {
-        window.removeEventListener('scroll', initLive2D)
-      }
+      //   setLive2DLoaded(true)
+      //   console.log('加载宠物挂件')
+      Promise.all([
+        loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js')
+      ]).then((e) => {
+        if (window?.loadlive2d) {
+          // https://github.com/xiazeyu/live2d-widget-models
+          loadlive2d('live2d', BLOG.WIDGET_PET_LINK)
+        }
+      })
     }
-  }, [])
+  }, [theme])
 
   function handleClick() {
     if (BLOG.WIDGET_PET_SWITCH_THEME) {
@@ -28,22 +34,3 @@ export default function Live2D() {
 
   return <canvas id="live2d" className='cursor-pointer' width="280" height="250" onClick={handleClick} alt='切换主题' title='切换主题' />
 }
-
-/**
- * 加载宠物
- */
-function initLive2D() {
-  window.removeEventListener('scroll', initLive2D)
-  setTimeout(() => {
-    // 加载 waifu.css live2d.min.js waifu-tips.js
-    // if (screen.width >= 768) {
-    Promise.all([
-      // loadExternalResource('https://cdn.zhangxinxu.com/sp/demo/live2d/live2d/js/live2d.js', 'js')
-      loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js')
-    ]).then((e) => {
-      // https://github.com/xiazeyu/live2d-widget-models
-      loadlive2d('live2d', BLOG.WIDGET_PET_LINK)
-    })
-    // }
-  }, 300)
-}

components/NotionPage.js

@@ -2,7 +2,6 @@ import { NotionRenderer } from 'react-notion-x'
 import dynamic from 'next/dynamic'
 // import mediumZoom from '@fisch0920/medium-zoom'
 import React, { useEffect } from 'react'
-import { isBrowser } from '@/lib/utils'
 import { Code } from 'react-notion-x/build/third-party/code'
 import TweetEmbed from 'react-tweet-embed'
 
@@ -42,15 +41,7 @@ const Tweet = ({ id }) => {
 }
 
 const NotionPage = ({ post, className }) => {
-//   const zoom = isBrowser() && mediumZoom({
-//     container: '.notion-viewport',
-//     background: 'rgba(0, 0, 0, 0.2)',
-//     scrollOffset: 200,
-//     margin: getMediumZoomMargin()
-//   })
-
-  //   const zoomRef = React.useRef(zoom ? zoom.clone() : null)
-
+  // 滚动到评论区
   useEffect(() => {
     setTimeout(() => {
       if (window.location.hash) {
@@ -60,24 +51,6 @@ const NotionPage = ({ post, className }) => {
         }
       }
     }, 180)
-
-    setTimeout(() => {
-      if (isBrowser()) {
-        // 将相册gallery下的图片加入放大功能
-        // const imgList = document.querySelectorAll('.notion-collection-card-cover img')
-        // if (imgList && zoomRef.current) {
-        //   for (let i = 0; i < imgList.length; i++) {
-        //     (zoomRef.current).attach(imgList[i])
-        //   }
-        // }
-
-        // 相册图片禁止跳转页面，改为放大图片功能功能
-        // const cards = document.getElementsByClassName('notion-collection-card')
-        // for (const e of cards) {
-        //   e.removeAttribute('href')
-        // }
-      }
-    }, 800)
   }, [])
 
   if (!post || !post.blockMap) {

components/PrismMac.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import Prism from 'prismjs'
 // 所有语言的prismjs 使用autoloader引入
 // import 'prismjs/plugins/autoloader/prism-autoloader'
@@ -18,20 +18,20 @@ import { isBrowser, loadExternalResource } from '@/lib/utils'
  * @returns
  */
 const PrismMac = () => {
-  if (isBrowser()) {
-    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((url) => {
-      if (window?.Prism?.plugins?.autoloader) {
-        window.Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
+  useEffect(() => {
+    if (isBrowser()) {
+      if (BLOG.CODE_MAC_BAR) {
+        loadExternalResource('/css/prism-mac-style.css', 'css')
       }
-      renderPrismMac()
-    })
-  }
-
-  React.useEffect(() => {
+      loadExternalResource(BLOG.PRISM_THEME_PATH, 'css')
+      loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((url) => {
+        console.log('渲染公式图表')
+        if (window?.Prism?.plugins?.autoloader) {
+          window.Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
+        }
+        renderPrismMac()
+      })
+    }
     renderMermaid()
   }, [])
   return <></>

components/TwikooCommentCounter.js

@@ -27,7 +27,7 @@ const TwikooCommentCounter = (props) => {
         urls: posts.map(post => post.slug), // 不包含协议、域名、参数的文章路径列表，必传参数
         includeReply: true // 评论数是否包括回复，默认：false
       }).then(function (res) {
-        console.log('查询', res)
+        // console.log('查询', res)
         commentsData = res
         updateCommentCount()
       }).catch(function (err) {