diff --git a/lib/memorize.js b/lib/memorize.js new file mode 100644 index 00000000..e69de29b diff --git a/lib/utils.js b/lib/utils.js index 6677e7df..df39fe64 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -1,5 +1,15 @@ // 封装异步加载资源的方法 +import { memo } from 'react' +/** + * 组件持久化 + */ +export const memorize = (Component) => { + const MemoizedComponent = (props) => { + return + } + return memo(MemoizedComponent) +} /** * 加载外部资源 * @param url 地址 例如 https://xx.com/xx.js diff --git a/pages/[...slug].js b/pages/[...slug].js index 00691796..b4ac5682 100644 --- a/pages/[...slug].js +++ b/pages/[...slug].js @@ -5,7 +5,7 @@ import { useGlobal } from '@/lib/global' import { useEffect, useState } from 'react' import { idToUuid } from 'notion-utils' import { useRouter } from 'next/router' -import { isBrowser } from '@/lib/utils' +import { isBrowser, memorize } from '@/lib/utils' import { getNotion } from '@/lib/notion/getNotion' import { getPageTableOfContents } from '@/lib/notion/getPageTableOfContents' import md5 from 'js-md5' @@ -17,7 +17,7 @@ import Loading from '@/components/Loading' * @param {*} props * @returns */ -const Slug = props => { +const Slug = memorize(props => { const { theme, changeLoadingState } = useGlobal() const { post, siteInfo } = props const router = useRouter() @@ -60,9 +60,9 @@ const Slug = props => { } /** - * 验证文章密码 - * @param {*} result - */ + * 验证文章密码 + * @param {*} result + */ const validPassword = passInput => { const encrypt = md5(post.slug + passInput) @@ -86,9 +86,9 @@ const Slug = props => { } return ( - + ) -} +}) export async function getStaticPaths() { if (!BLOG.isProd) { diff --git a/pages/archive/index.js b/pages/archive/index.js index 17b1fd80..6a247414 100644 --- a/pages/archive/index.js +++ b/pages/archive/index.js @@ -16,7 +16,7 @@ const ArchiveIndex = props => { type: 'website' } - const LayoutArchive = dynamic(() => import(`@/themes/${theme}/LayoutArchive`).then(async (m) => { return m.LayoutArchive }), { ssr: true, loading: () => }) + const LayoutArchive = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutArchive }), { ssr: true, loading: () => }) return } diff --git a/pages/category/[category]/index.js b/pages/category/[category]/index.js index 246170b9..28725614 100644 --- a/pages/category/[category]/index.js +++ b/pages/category/[category]/index.js @@ -15,7 +15,7 @@ export default function Category(props) { const { siteInfo, posts } = props const { locale } = useGlobal() if (!posts) { - const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => }) + const Layout404 = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => }) return } const meta = { @@ -28,7 +28,7 @@ export default function Category(props) { type: 'website' } - const LayoutCategory = dynamic(() => import(`@/themes/${theme}/LayoutCategory`).then(async (m) => { return m.LayoutCategory }), { ssr: true, loading: () => }) + const LayoutCategory = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutCategory }), { ssr: true, loading: () => }) return } diff --git a/pages/category/[category]/page/[page].js b/pages/category/[category]/page/[page].js index f537448a..bb7d6d26 100644 --- a/pages/category/[category]/page/[page].js +++ b/pages/category/[category]/page/[page].js @@ -15,7 +15,7 @@ export default function Category(props) { const { siteInfo, posts } = props const { locale } = useGlobal() if (!posts) { - const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => }) + const Layout404 = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => }) return } const meta = { @@ -28,7 +28,7 @@ export default function Category(props) { type: 'website' } - const LayoutCategory = dynamic(() => import(`@/themes/${theme}/LayoutCategory`).then(async (m) => { return m.LayoutCategory }), { ssr: true, loading: () => }) + const LayoutCategory = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutCategory }), { ssr: true, loading: () => }) return } diff --git a/pages/category/index.js b/pages/category/index.js index 3c74ef59..8c7c6515 100644 --- a/pages/category/index.js +++ b/pages/category/index.js @@ -20,7 +20,7 @@ export default function Category(props) { slug: 'category', type: 'website' } - const LayoutCategoryIndex = dynamic(() => import(`@/themes/${theme}/LayoutCategoryIndex`).then(async (m) => { return m.LayoutCategoryIndex }), { ssr: false }) + const LayoutCategoryIndex = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutCategoryIndex }), { ssr: false }) return } diff --git a/pages/index.js b/pages/index.js index 4fbd5673..86ee427a 100644 --- a/pages/index.js +++ b/pages/index.js @@ -6,19 +6,24 @@ import { generateRss } from '@/lib/rss' import { generateRobotsTxt } from '@/lib/robots.txt' import dynamic from 'next/dynamic' import Loading from '@/components/Loading' +import { memorize } from '@/lib/utils' /** * 首页布局 * @param {*} props * @returns */ -const Index = props => { +const Index = memorize(props => { const { theme } = useGlobal() - const LayoutIndex = dynamic(() => import(`@/themes/${theme}`) - .then(async (m) => { return m.LayoutIndex }), { ssr: true, loading: () => } + const LayoutIndex = dynamic( + () => + import(`@/themes/${theme}`).then((m) => { + return m.LayoutIndex + }), + { ssr: true, loading: () => } ) return -} +}) /** * SSG 获取数据 diff --git a/pages/page/[page].js b/pages/page/[page].js index b94194fc..252ec566 100644 --- a/pages/page/[page].js +++ b/pages/page/[page].js @@ -19,7 +19,7 @@ const Page = props => { type: 'website' } - const LayoutPage = dynamic(() => import(`@/themes/${theme}/LayoutPage`).then(async (m) => { return m.LayoutPage }), { ssr: true, loading: () => }) + const LayoutPage = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutPage }), { ssr: true, loading: () => }) return } diff --git a/pages/search/[keyword]/index.js b/pages/search/[keyword]/index.js index a30ae812..dd81f60f 100644 --- a/pages/search/[keyword]/index.js +++ b/pages/search/[keyword]/index.js @@ -17,7 +17,7 @@ const Index = props => { } const { theme } = useGlobal() - const LayoutSearch = dynamic(() => import(`@/themes/${theme}/LayoutSearch`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => }) + const LayoutSearch = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => }) return } diff --git a/pages/search/[keyword]/page/[page].js b/pages/search/[keyword]/page/[page].js index 188cc7b8..57ab7163 100644 --- a/pages/search/[keyword]/page/[page].js +++ b/pages/search/[keyword]/page/[page].js @@ -16,7 +16,7 @@ const Index = props => { type: 'website' } const { theme } = useGlobal() - const LayoutSearch = dynamic(() => import(`@/themes/${theme}/LayoutSearch`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => }) + const LayoutSearch = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => }) return } diff --git a/pages/search/index.js b/pages/search/index.js index c7e4f53d..a2347808 100644 --- a/pages/search/index.js +++ b/pages/search/index.js @@ -34,7 +34,7 @@ const Search = props => { const { theme } = useGlobal() - const LayoutSearch = dynamic(() => import(`@/themes/${theme}/LayoutSearch`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => }) + const LayoutSearch = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => }) return } diff --git a/pages/tag/[tag]/index.js b/pages/tag/[tag]/index.js index c12aace1..1ba4f220 100644 --- a/pages/tag/[tag]/index.js +++ b/pages/tag/[tag]/index.js @@ -10,7 +10,7 @@ const Tag = props => { const { tag, siteInfo, posts } = props if (!posts) { - const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => }) + const Layout404 = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => }) return } @@ -21,8 +21,8 @@ const Tag = props => { slug: 'tag/' + tag, type: 'website' } - const LayoutTagIndex = dynamic(() => import(`@/themes/${theme}/LayoutTagIndex`).then(async (m) => { return m.LayoutTagIndex }), { ssr: true, loading: () => }) - return + const LayoutTag = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutTag }), { ssr: true, loading: () => }) + return } export async function getStaticProps({ params: { tag } }) { diff --git a/pages/tag/[tag]/page/[page].js b/pages/tag/[tag]/page/[page].js index 7b89a2da..c3fc2009 100644 --- a/pages/tag/[tag]/page/[page].js +++ b/pages/tag/[tag]/page/[page].js @@ -10,7 +10,7 @@ const Tag = props => { const { tag, siteInfo, posts } = props if (!posts) { - const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => }) + const Layout404 = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => }) return } @@ -21,7 +21,7 @@ const Tag = props => { slug: 'tag/' + tag, type: 'website' } - const LayoutTag = dynamic(() => import(`@/themes/${theme}/LayoutTag`).then(async (m) => { return m.LayoutTag }), { ssr: true, loading: () => }) + const LayoutTag = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutTag }), { ssr: true, loading: () => }) return } diff --git a/pages/tag/index.js b/pages/tag/index.js index e7299896..3f69551e 100644 --- a/pages/tag/index.js +++ b/pages/tag/index.js @@ -21,7 +21,7 @@ const TagIndex = props => { slug: 'tag', type: 'website' } - const LayoutTagIndex = dynamic(() => import(`@/themes/${theme}/LayoutTagIndex`).then(async (m) => { return m.LayoutTagIndex }), { ssr: true, loading: () => }) + const LayoutTagIndex = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutTagIndex }), { ssr: true, loading: () => }) return }