kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-02-10 09:03:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #168 from unix/prefetch

Browse Source 
docs: optimize time of page load
This commit is contained in:
witt
2020-05-03 01:19:12 +08:00
committed by GitHub
parent bb546d130f 284940b10a
commit 425b85d79d
5 changed files with 43 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
lib/components/layout.tsx
View File

@@ -27,7 +27,17 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(({ ch
useEffect(() => setShowAfterRender(true), [])
if (!showAfterRender) return null
if (!showAfterRender) return (
<section>
{children}
<style jsx>{`
section {
display: none;
opacity: 0;
}
`}</style>
</section>
)
return (
<div className="layout">
<TabbarMobile onClick={mobileTabbarClickHandler} />

23
lib/components/menu/index.tsx
View File

@@ -1,10 +1,33 @@
import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import MenuLinks from './menu-links'
import MenuSticker from './menu-sticker'
import { useConfigs } from 'lib/config-context'
const Menu: React.FC<{}> = () => {
const router = useRouter()
const { isChinese } = useConfigs()
const [showAfterRender, setShowAfterRender] = useState<boolean>(false)
useEffect(() => setShowAfterRender(true), [])
useEffect(() => {
const prefetch = async () => {
const urls = isChinese ? [
'/zh-cn/guide/introduction',
'/zh-cn/components/text',
'/zh-cn/customization',
] : [
'/en-us/guide/introduction',
'/en-us/components/text',
'/en-us/customization',
]
await Promise.all(urls.map(async (url) => {
await router.prefetch(url)
}))
}
prefetch()
.then()
.catch(err => console.log(err))
}, [isChinese])
if (!showAfterRender) return null
return (

8
lib/components/playground/index.ts Normal file
View File

@@ -0,0 +1,8 @@
import dynamic from 'next/dynamic'
const DynamicPlaygroundWithNoSSR = dynamic(
() => import('./playground'),
{ ssr: false }
)
export default DynamicPlaygroundWithNoSSR

4
lib/components/playground/index.tsx → lib/components/playground/playground.tsx
View File

@@ -3,12 +3,10 @@ import { LivePreview, LiveProvider, LiveEditor, LiveError } from 'react-live'
import withDefaults from 'components/utils/with-defaults'
import useClipboard from 'components/utils/use-clipboard'
import { useTheme, useToasts } from 'components'
import { useConfigs } from '../../config-context'
import { useConfigs } from 'lib/config-context'
import makeCodeTheme from './code-theme'
import RightIcon from '@zeit-ui/react-icons/chevronRight'
import CopyIcon from '@zeit-ui/react-icons/copy'
// import RightIcon from 'lib/components/icons/right'
// import CopyIcon from 'lib/components/icons/copy'
import Title from './title'
interface Props {

16
pages/_document.tsx
View File

@@ -1,22 +1,6 @@
import Document, { Html, Head, Main, NextScript } from 'next/document'
import flush from 'styled-jsx/server'
import { DocumentContext, DocumentInitialProps } from 'next/dist/next-server/lib/utils'
class MyDocument extends Document {
static async getInitialProps (ctx: DocumentContext): Promise<DocumentInitialProps> {
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{flush()}
</>
)
}
}
render() {
return (
<Html>