next critical 다운로드 - next critical 소스 코드 다운로드

next critical

타사 구성 요소

1.0.0

다운로드

다음 중요 ⚡

다음으로 중요한 CSS로 웹 사이트 속도를 향상시키는 플러그인입니다.

사용 방법

설치하다:

 npm i -S next-critical

_document.js에서 Critical CSS를 사용하여 사용자 정의 헤드 구성 요소를 만듭니다.

 import Document , { Html , Head , Main , NextScript } from 'next/document'
import CustomHead from 'next-critical'
import { readFileSync } from 'fs'
import * as React from 'react'

let styleSheetContent : string = ''

export default class MyDocument extends Document {
  // @ts-ignore
  static async getInitialProps ( ctx ) {
    const initialProps = await Document . getInitialProps ( ctx )

    // Your critical css file
    const filePath = `./src/styles/critical.css`
    styleSheetContent = readFileSync ( filePath , 'utf8' )

    return { ... initialProps }
  }

  render ( ) {
    const CriticalCssHead = CustomHead ( Head , styleSheetContent )

    return (
      < Html >
        < CriticalCssHead />
        < body >
          < Main />
          < NextScript />
        </ body >
      </ Html >
    )
  }
}