SEO 优化首屏加载体积

themes/simple/components/ArticleInfo.js

@@ -4,7 +4,12 @@ import CONFIG from '../config'
 import { siteConfig } from '@/lib/config'
 import { formatDateFmt } from '@/lib/formatDate'
 
-export const ArticleInfo = (props) => {
+/**
+ * 文章描述
+ * @param {*} props
+ * @returns
+ */
+export default function ArticleInfo (props) {
   const { post } = props
 
   const { locale } = useGlobal()

themes/simple/components/ArticleLock.js

@@ -8,7 +8,7 @@ import { useEffect, useRef } from 'react'
  * @param validPassword(bool) 回调函数，校验正确回调入参为true
  * @returns
  */
-export const ArticleLock = props => {
+export default function ArticleLock (props) {
   const { validPassword } = props
   const { locale } = useGlobal()
 

themes/simple/components/BlogListPage.js

@@ -6,7 +6,12 @@ import { AdSlot } from '@/components/GoogleAdsense'
 import { siteConfig } from '@/lib/config'
 import CONFIG from '../config'
 
-export const BlogListPage = props => {
+/**
+ * 博客列表
+ * @param {*} props
+ * @returns
+ */
+export default function BlogListPage(props) {
   const { page = 1, posts, postCount } = props
   const router = useRouter()
   const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))

themes/simple/components/BlogListScroll.js

@@ -4,7 +4,12 @@ import throttle from 'lodash.throttle'
 import { BlogItem } from './BlogItem'
 import { siteConfig } from '@/lib/config'
 
-export const BlogListScroll = props => {
+/**
+ * 滚动博客列表
+ * @param {*} props
+ * @returns
+ */
+export default function BlogListScroll (props) {
   const { posts } = props
   const { locale } = useGlobal()
 

themes/simple/components/Footer.js

@@ -1,7 +1,12 @@
 import DarkModeButton from '@/components/DarkModeButton'
 import { siteConfig } from '@/lib/config'
 
-export const Footer = (props) => {
+/**
+ * 页脚
+ * @param {*} props
+ * @returns
+ */
+export default function Footer (props) {
   const d = new Date()
   const currentYear = d.getFullYear()
   const since = siteConfig('SINCE')

themes/simple/components/Header.js

@@ -9,7 +9,7 @@ import { compressImage } from '@/lib/notion/mapImage'
  * 网站顶部
  * @returns
  */
-export const Header = (props) => {
+export default function Header (props) {
   const { siteInfo } = props
   const avatar = compressImage(siteInfo?.icon || siteConfig('AVATAR'), 200)
 

themes/simple/components/NavBar.js

@@ -7,7 +7,7 @@ import { MenuList } from './MenuList'
  * @param {*} props
  * @returns
  */
-export const NavBar = (props) => {
+export default function NavBar (props) {
   const [showSearchInput, changeShowSearchInput] = useState(false)
   const router = useRouter()
 

themes/simple/components/SideBar.js

@@ -3,7 +3,12 @@ import Live2D from '@/components/Live2D'
 import Announcement from './Announcement'
 import Catalog from './Catalog'
 
-export const SideBar = (props) => {
+/**
+ * 侧边栏
+ * @param {*} props
+ * @returns
+ */
+export default function SideBar (props) {
   const { notice } = props
   return (<>
 

themes/simple/components/TopBar.js

@@ -5,7 +5,7 @@ import { siteConfig } from '@/lib/config'
  * 网站顶部 提示栏
  * @returns
  */
-export const TopBar = (props) => {
+export default function TopBar (props) {
   const content = siteConfig('SIMPLE_TOP_BAR_CONTENT', null, CONFIG)
 
   if (content) {

themes/simple/index.js

@@ -1,31 +1,34 @@
 import CONFIG from './config'
-import { BlogListPage } from './components/BlogListPage'
-import { BlogListScroll } from './components/BlogListScroll'
 import { useEffect } from 'react'
 import { isBrowser } from '@/lib/utils'
-import BlogArchiveItem from './components/BlogArchiveItem'
-import { ArticleLock } from './components/ArticleLock'
-import NotionPage from '@/components/NotionPage'
-import { ArticleInfo } from './components/ArticleInfo'
-import Comment from '@/components/Comment'
-import ArticleAround from './components/ArticleAround'
-import ShareBar from '@/components/ShareBar'
-import { AdSlot } from '@/components/GoogleAdsense'
-import Link from 'next/link'
-import { TopBar } from './components/TopBar'
-import { Header } from './components/Header'
-import { NavBar } from './components/NavBar'
-import { siteConfig } from '@/lib/config'
-import { SideBar } from './components/SideBar'
-import JumpToTopButton from './components/JumpToTopButton'
-import { Footer } from './components/Footer'
 import { useGlobal } from '@/lib/global'
-import SearchInput from './components/SearchInput'
+import { AdSlot } from '@/components/GoogleAdsense'
+import { siteConfig } from '@/lib/config'
 import { Transition } from '@headlessui/react'
+import Link from 'next/link'
 import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
-import CommonHead from '@/components/CommonHead'
-import WWAds from '@/components/WWAds'
+import dynamic from 'next/dynamic'
+
+// 主题组件
+const BlogListScroll = dynamic(() => import('./components/BlogListScroll'), { ssr: false });
+const BlogArchiveItem = dynamic(() => import('./components/BlogArchiveItem'), { ssr: false });
+const ArticleLock = dynamic(() => import('./components/ArticleLock'), { ssr: false });
+const NotionPage = dynamic(() => import('@/components/NotionPage'), { ssr: false });
+const ArticleInfo = dynamic(() => import('./components/ArticleInfo'), { ssr: false });
+const Comment = dynamic(() => import('@/components/Comment'), { ssr: false });
+const ArticleAround = dynamic(() => import('./components/ArticleAround'), { ssr: false });
+const ShareBar = dynamic(() => import('@/components/ShareBar'), { ssr: false });
+const TopBar = dynamic(() => import('./components/TopBar'), { ssr: false });
+const Header = dynamic(() => import('./components/Header'), { ssr: false });
+const NavBar = dynamic(() => import('./components/NavBar'), { ssr: false });
+const SideBar = dynamic(() => import('./components/SideBar'), { ssr: false });
+const JumpToTopButton = dynamic(() => import('./components/JumpToTopButton'), { ssr: false });
+const Footer = dynamic(() => import('./components/Footer'), { ssr: false });
+const SearchInput = dynamic(() => import('./components/SearchInput'), { ssr: false });
+const CommonHead = dynamic(() => import('@/components/CommonHead'), { ssr: false });
+const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false });
+const BlogListPage = dynamic(() => import('./components/BlogListPage'), { ssr: false })
 
 /**
  * 基础布局