Merge pull request #87 from stack-wuh/feat-performance

Feat performance

components/banner/gallery.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from 'react'
 import classnames from 'classnames'
 import Slider, { Settings } from 'react-slick'
 import { Button } from '@/components/button'
-import swr from 'swr'
+import { useRequest } from 'ahooks'
 import fetcher from '@/lib/fetch'
 import { API_GALLERY_LIST } from '@/constant/api'
 import { rowItem } from '@/pages/api/gallery'
@@ -11,7 +11,12 @@ type galleryDataType = {
   galleryList: rowItem[]
 }
 const useGalleryData = (): galleryDataType => {
-  const { data: gallery } = swr(API_GALLERY_LIST, fetcher)
+  const { data: gallery } = useRequest(() => {
+    return fetcher(`${API_GALLERY_LIST}`)
+  }, {
+    cacheKey: API_GALLERY_LIST
+  })
+
   if (!gallery || !gallery.data || gallery.error) return { galleryList: [] }
 
   return {

components/post/list.tsx

@@ -5,7 +5,6 @@ import Image from '@/components/image/image'
 import { LoadMoreButton } from '@/components/button'
 import useConfig from '@/hooks/useConfig'
 import fetcher from '@/lib/fetch'
-import useSWRInfinite from 'swr/infinite'
 import { API_ARTICLE_LIST } from '@/constant/api'
 import { useRequest } from 'ahooks'
 

layout/withDynamic.tsx

@@ -1,22 +1,6 @@
 import * as React from 'react'
-import { useEventListener, useExternal } from 'ahooks'
 
 const WithDynamic: React.FC<{}> = (props) => {
-  const [iconNormalPath, setIconNormalPath] = React.useState('')
-  const [iconColorPath, setIconColorPath] = React.useState('')
-  /**
-   * @NOTE 普通字体图标的链接
-   */
-  useExternal(iconNormalPath, { type: 'css' })
-  /**
-   * @NOTE 带色彩的字体图标库
-   */
-  useExternal(iconColorPath, { type: 'css' })
-
-  useEventListener('load', function () { // eslint-disable-line react-hooks/rules-of-hooks
-    setIconNormalPath('//at.alicdn.com/t/font_1587964_ap06iu717e5.css')
-    setIconColorPath('at.alicdn.com/t/font_2595178_wa25xow6jmp.css')
-  })
 
   return <>{props.children}</>
 }

package.json

@@ -14,16 +14,13 @@
     "release": "conventional-changelog -i CHANGELOG.MD -s -r -t -p angular"
   },
   "dependencies": {
-    "@babel/preset-env": "^7.15.6",
     "@rematch/core": "^2.2.0",
     "@rematch/immer": "^2.1.3",
     "@rematch/persist": "^2.1.2",
-    "@types/react-slick": "^0.23.7",
     "ahooks": "^3.7.1",
     "classnames": "^2.3.1",
     "compression-webpack-plugin": "^9.0.0",
     "conventional-changelog-cli": "^2.1.1",
-    "cross-env": "^7.0.3",
     "dayjs": "^1.10.7",
     "immer": "^9.0.12",
     "isomorphic-fetch": "^3.0.0",
@@ -42,10 +39,12 @@
     "redux-persist": "^6.0.0",
     "remark": "^14.0.1",
     "remark-html": "^15.0.0",
-    "scheduler": "^0.20.2",
-    "swr": "^1.0.1"
+    "scheduler": "^0.20.2"
   },
   "devDependencies": {
+    "@types/react-slick": "^0.23.7",
+    "@babel/preset-env": "^7.15.6",
+    "cross-env": "^7.0.3",
     "@babel/core": "^7.15.5",
     "@next/bundle-analyzer": "^11.1.2",
     "@types/isomorphic-fetch": "^0.0.35",

pages/_app.tsx

@@ -66,6 +66,21 @@ function MyApp({ Component, pageProps, router }: NextPropsWithLayout) {
   const [googleFontPath, setGoogleFontPath] = React.useState('')
   const [googleFontNormalPath, setGoogleFontNormalPath] = React.useState('')
 
+  /**
+   * @NOTE ali font 链接
+   */
+  const [iconNormalPath, setIconNormalPath] = React.useState('')
+  const [iconColorPath, setIconColorPath] = React.useState('')
+
+  /**
+   * @NOTE 普通字体图标的链接
+   */
+  useExternal(iconNormalPath, { type: 'css' })
+  /**
+    * @NOTE 带色彩的字体图标库
+    */
+  useExternal(iconColorPath, { type: 'css' })
+
   useExternal(bubblePath, { type: 'js' })
   useExternal(themePath, { type: 'js' })
   useExternal(googleFontPath, { type: 'css' })
@@ -75,10 +90,12 @@ function MyApp({ Component, pageProps, router }: NextPropsWithLayout) {
   useExternal(slideThemePath, { type: 'css' })
 
   useEventListener('load', () => {
+    setIconNormalPath('//at.alicdn.com/t/font_1587964_ap06iu717e5.css')
     setBubblePath('/scripts/bubble.js')
-
+    
     setThemePath('/scripts/theme-main.js')
-
+
+    setIconColorPath('at.alicdn.com/t/font_2595178_wa25xow6jmp.css')
     setSlidePath('https://src.wuh.site/stylesheet/slick.min.css')
     setSlideThemePath('https://src.wuh.site/stylesheet/slick-theme.min.css')
 

pages/post/[id].tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
-import useSWR from 'swr'
-import { useEventListener, useExternal, useDocumentVisibility } from 'ahooks'
+import { useExternal, useRequest } from 'ahooks'
 import fetcher from '@/lib/fetch'
 import { useRouter } from 'next/router'
 import { API_ARTICLE_ITEM } from '@/constant/api'
@@ -17,14 +16,12 @@ import Empty from '@/components/empty'
 import withLayout from '@/layout/layout'
 
 function useData(id: string | string[] | undefined) {
-  const { data, error } = useSWR(
-    id ? `${API_ARTICLE_ITEM}${id}` : null,
-    fetcher,
-    {
-      revalidateOnFocus: false,
-      revalidateOnMount: true,
-    }
-  )
+  const {data, error} = useRequest(params => {
+    return fetcher(`${API_ARTICLE_ITEM}${params.id}`)
+  }, {
+    defaultParams: [{ id }],
+    cacheKey: API_ARTICLE_ITEM
+  })
 
   return {
     data,