评论插件异步加载

components/Comment.js

@@ -1,9 +1,10 @@
-import dynamic from 'next/dynamic'
 import Tabs from '@/components/Tabs'
-import { isBrowser, isSearchEngineBot } from '@/lib/utils'
-import { useRouter } from 'next/router'
-import Artalk from './Artalk'
 import { siteConfig } from '@/lib/config'
+import { isBrowser, isSearchEngineBot } from '@/lib/utils'
+import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
+import { useEffect, useRef, useState } from 'react'
+import Artalk from './Artalk'
 
 const WalineComponent = dynamic(
   () => {
@@ -57,11 +58,14 @@ const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
 
 /**
  * 评论组件
+ * 只有当前组件在浏览器可见范围内才会加载内容
  * @param {*} param0
  * @returns
  */
-const Comment = ({ siteInfo, frontMatter, className }) => {
+const Comment = ({ frontMatter, className }) => {
   const router = useRouter()
+  const [shouldLoad, setShouldLoad] = useState(false)
+  const commentRef = useRef(null)
 
   const COMMENT_ARTALK_SERVER = siteConfig('COMMENT_ARTALK_SERVER')
   const COMMENT_TWIKOO_ENV_ID = siteConfig('COMMENT_TWIKOO_ENV_ID')
@@ -73,16 +77,39 @@ const Comment = ({ siteInfo, frontMatter, className }) => {
   const COMMENT_GITALK_CLIENT_ID = siteConfig('COMMENT_GITALK_CLIENT_ID')
   const COMMENT_WEBMENTION_ENABLE = siteConfig('COMMENT_WEBMENTION_ENABLE')
 
-  if (isSearchEngineBot()) {
-    return null
-  }
+  useEffect(() => {
+    // Check if the component is visible in the viewport
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          setShouldLoad(true)
+          observer.unobserve(entry.target)
+        }
+      })
+    })
+
+    if (commentRef.current) {
+      observer.observe(commentRef.current)
+    }
+
+    return () => {
+      if (commentRef.current) {
+        observer.unobserve(commentRef.current)
+      }
+    }
+  }, [])
 
   // 当连接中有特殊参数时跳转到评论区
-  if (isBrowser && ('giscus' in router.query || router.query.target === 'comment')) {
+  if (
+    isBrowser &&
+    ('giscus' in router.query || router.query.target === 'comment')
+  ) {
     setTimeout(() => {
       const url = router.asPath.replace('?target=comment', '')
       history.replaceState({}, '', url)
-      document?.getElementById('comment')?.scrollIntoView({ block: 'start', behavior: 'smooth' })
+      document
+        ?.getElementById('comment')
+        ?.scrollIntoView({ block: 'start', behavior: 'smooth' })
     }, 1000)
   }
 
@@ -90,48 +117,85 @@ const Comment = ({ siteInfo, frontMatter, className }) => {
     return <>Loading...</>
   }
 
+  if (isSearchEngineBot()) {
+    return null
+  }
+
   return (
-        <div key={frontMatter?.id} id='comment' className={`comment mt-5 text-gray-800 dark:text-gray-300 ${className || ''}`}>
-            <Tabs>
-                {COMMENT_ARTALK_SERVER && (<div key='Artalk'>
-                    <Artalk />
-                </div>)}
-
-                {COMMENT_TWIKOO_ENV_ID && (<div key='Twikoo'>
-                    <TwikooCompenent />
-                </div>)}
-
-                {COMMENT_WALINE_SERVER_URL && (<div key='Waline'>
-                    <WalineComponent />
-                </div>)}
-
-                {COMMENT_VALINE_APP_ID && (<div key='Valine' name='reply'>
-                    <ValineComponent path={frontMatter.id} />
-                </div>)}
-
-                {COMMENT_GISCUS_REPO && (
-                    <div key="Giscus">
-                        <GiscusComponent className="px-2" />
-                    </div>
-                )}
-
-                {COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
-                    <CusdisComponent frontMatter={frontMatter} />
-                </div>)}
-
-                {COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
-                    <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
-                </div>)}
-
-                {COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
-                    <GitalkComponent frontMatter={frontMatter} />
-                </div>)}
-
-                {COMMENT_WEBMENTION_ENABLE && (<div key='WebMention'>
-                    <WebMentionComponent frontMatter={frontMatter} className="px-2" />
-                </div>)}
-            </Tabs>
+    <div
+      key={frontMatter?.id}
+      id='comment'
+      ref={commentRef}
+      className={`comment mt-5 text-gray-800 dark:text-gray-300 ${className || ''}`}>
+      {/* 延迟加载评论区 */}
+      {!shouldLoad && (
+        <div className='text-center'>
+          Loading...
+          <i className='fas fa-spinner animate-spin text-3xl ' />
         </div>
+      )}
+
+      {shouldLoad && (
+        <Tabs>
+          {COMMENT_ARTALK_SERVER && (
+            <div key='Artalk'>
+              <Artalk />
+            </div>
+          )}
+
+          {COMMENT_TWIKOO_ENV_ID && (
+            <div key='Twikoo'>
+              <TwikooCompenent />
+            </div>
+          )}
+
+          {COMMENT_WALINE_SERVER_URL && (
+            <div key='Waline'>
+              <WalineComponent />
+            </div>
+          )}
+
+          {COMMENT_VALINE_APP_ID && (
+            <div key='Valine' name='reply'>
+              <ValineComponent path={frontMatter.id} />
+            </div>
+          )}
+
+          {COMMENT_GISCUS_REPO && (
+            <div key='Giscus'>
+              <GiscusComponent className='px-2' />
+            </div>
+          )}
+
+          {COMMENT_CUSDIS_APP_ID && (
+            <div key='Cusdis'>
+              <CusdisComponent frontMatter={frontMatter} />
+            </div>
+          )}
+
+          {COMMENT_UTTERRANCES_REPO && (
+            <div key='Utterance'>
+              <UtterancesComponent
+                issueTerm={frontMatter.id}
+                className='px-2'
+              />
+            </div>
+          )}
+
+          {COMMENT_GITALK_CLIENT_ID && (
+            <div key='GitTalk'>
+              <GitalkComponent frontMatter={frontMatter} />
+            </div>
+          )}
+
+          {COMMENT_WEBMENTION_ENABLE && (
+            <div key='WebMention'>
+              <WebMentionComponent frontMatter={frontMatter} className='px-2' />
+            </div>
+          )}
+        </Tabs>
+      )}
+    </div>
   )
 }