diff --git a/themes/example/components/ExampleRecentComments.js b/themes/example/components/ExampleRecentComments.js
index 32d11463..e1fe86ca 100644
--- a/themes/example/components/ExampleRecentComments.js
+++ b/themes/example/components/ExampleRecentComments.js
@@ -1,7 +1,7 @@
 import React from 'react'
-import { RecentComments } from '@waline/client'
 import BLOG from '@/blog.config'
 import Link from 'next/link'
+import { RecentComments } from '@waline/client'
 
 /**
  * @see https://waline.js.org/guide/get-started.html
diff --git a/themes/example/components/SideBar.js b/themes/example/components/SideBar.js
index 0e737fa3..ea45f851 100644
--- a/themes/example/components/SideBar.js
+++ b/themes/example/components/SideBar.js
@@ -2,7 +2,8 @@ import BLOG from '@/blog.config'
 import Live2D from '@/components/Live2D'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
-import ExampleRecentComments from './ExampleRecentComments'
+import dynamic from 'next/dynamic'
+const ExampleRecentComments = dynamic(() => import('./ExampleRecentComments'))
 
 export const SideBar = (props) => {
   const { locale } = useGlobal()
diff --git a/themes/hexo/components/HexoRecentComments.js b/themes/hexo/components/HexoRecentComments.js
index 4977ccf4..d4cbacab 100644
--- a/themes/hexo/components/HexoRecentComments.js
+++ b/themes/hexo/components/HexoRecentComments.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { RecentComments } from '@waline/client'
 import BLOG from '@/blog.config'
 import Card from '@/themes/hexo/components/Card'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
+import { RecentComments } from '@waline/client'
 
 /**
  * @see https://waline.js.org/guide/get-started.html
diff --git a/themes/hexo/components/SideRight.js b/themes/hexo/components/SideRight.js
index 8079fb2d..8680f144 100644
--- a/themes/hexo/components/SideRight.js
+++ b/themes/hexo/components/SideRight.js
@@ -6,9 +6,10 @@ import Catalog from './Catalog'
 import { InfoCard } from './InfoCard'
 import { AnalyticsCard } from './AnalyticsCard'
 import CONFIG_HEXO from '../config_hexo'
-import HexoRecentComments from './HexoRecentComments'
 import BLOG from '@/blog.config'
+import dynamic from 'next/dynamic'
 
+const HexoRecentComments = dynamic(() => import('./HexoRecentComments'))
 /**
  * Hexo主题右侧栏
  * @param {*} props
diff --git a/themes/next/components/NextRecentComments.js b/themes/next/components/NextRecentComments.js
index 961c3e08..81e9845d 100644
--- a/themes/next/components/NextRecentComments.js
+++ b/themes/next/components/NextRecentComments.js
@@ -1,7 +1,7 @@
 import React from 'react'
-import { RecentComments } from '@waline/client'
 import BLOG from '@/blog.config'
 import Link from 'next/link'
+import { RecentComments } from '@waline/client'
 
 /**
  * @see https://waline.js.org/guide/get-started.html
diff --git a/themes/next/components/SideAreaRight.js b/themes/next/components/SideAreaRight.js
index d5ccfe15..bca085e0 100644
--- a/themes/next/components/SideAreaRight.js
+++ b/themes/next/components/SideAreaRight.js
@@ -6,8 +6,9 @@ import CategoryGroup from './CategoryGroup'
 import TagGroups from './TagGroups'
 import CONFIG_NEXT from '../config_next'
 import { useRouter } from 'next/router'
-import NextRecentComments from './NextRecentComments'
 import BLOG from '@/blog.config'
+import dynamic from 'next/dynamic'
+const NextRecentComments = dynamic(() => import('./NextRecentComments'))
 
 /**
  * 侧边平铺