critters 다운로드 - critters 소스 코드 다운로드

critters

기타 소스코드

3.0.2

다운로드

주의

Critters의 소유권은 NUXT 팀으로 이동하여 프로젝트를 유지할 것입니다. Critters를 계속 사용하려면 https://github.com/danielroe/beasties의 적극적으로 관리 된 포크로 전환하십시오. 이 repo는 이제 보관되었으며 향후 업데이트를받지 못할 것입니다.

동물들

Critters는 앱의 중요한 CSS를 상인하고 나머지를 게으른로드하는 플러그인입니다.

동물들

헤드리스 브라우저를 사용하여 콘텐츠를 렌더링하지 않기 때문에 다른 옵션과 약간 다릅니다. 이 트레이드 오프를 통해 동물은 매우 빠르고 가벼울 수 있습니다. 또한 동물이 문서에서 사용하는 모든 CSS 규칙을 상회하는 것보다는 문서에서 사용하는 모든 CSS 규칙을 인식한다는 것을 의미합니다. 대안은 유사한 라이브러리를 참조하십시오.

Critters의 디자인은 Prerendered/SSR'D 단일 페이지 응용 프로그램에 대한 중요한 CSS를 인화 할 때 적합합니다. 그것은 대부분의 단일 페이지 응용 프로그램의 첫 번째 페인트 시간을 극적으로 향상시키기 위해 Prerender-Loader에 대한 훌륭한 칭찬으로 개발되었습니다.

특징

빠른 - 브라우저 없음, 종속성이 거의 없습니다
Webpack Critters-Webpack-Plugin과 통합됩니다
사전로드 및/또는 임계 글꼴을 지원합니다
자두가 사용되지 않은 CSS 키 프레임 및 미디어 쿼리
게으른로드 스타일 시트에서 상감 된 CSS 규칙을 제거합니다

설치

먼저, 크리터를 개발 종속성으로 설치합니다.

 NPM I -D 동물

또는

 원사 추가 -D 동물원

간단한 예

 'Critters'에서 Creatters 수입; Const Critters = New Critters ({{
  // 선택적 구성 (아래 참조)}); const html =`<style> .red {color : red} .Blue {color : blue} </style> <div class = "blue"> 나는 파란색 </ div>`; const inlined = await critters.process (html); console.log (inlined); // ".

웹 팩 사용

Critters는 Critters-Webpack-Plugin이라는 웹 팩 플러그인으로도 제공됩니다.

Webpack 플러그인은 메인 critters 패키지와 동일한 구성 옵션을 지원합니다.

 // webpack.config.js+const critters = require ( 'critters-webpack-plugin'); module.exports = {
  플러그인 : [+ new Critters ({+ // 선택적 구성+ preload : 'swap',+ contactureLectors : [/^.btn/, '.banner'],+})
  ]]
}

그게 다야! 결과적인 HTML은 중요한 CSS를 상환하고 스타일 시트는 게으른로드됩니다.

용법

동물들

모든 선택 사항. 그들을 new Critters({ ... }) .

매개 변수

options

속성

CSS 파일의 path 문자열 기본 경로 위치 (기본값 : '' )
CSS 리소스의 공공 경로 문자열 publicPath 경로. 이 접두사는 HREF에서 제거됩니다 (기본값 : '' )
external 스타일 시트의 외부 부울 인라인 스타일 (기본값 : true )
inlineThreshold 번호 인라인 외부 스타일 시트가 주어진 크기보다 작은 외부 스타일 시트 (기본값 : 0 )
minimumExternalSize 숫자가 아닌 외부 스타일 시트 가이 크기보다 낮은 경우 (기본값 : 0 )
pruneSource Boolean 외부 스타일 시트에서 상감 규칙을 제거합니다 (기본값 : false )
mergeStylesheets 부울은 상감 된 스타일 시트를 단일 <style> 태그로 병합합니다 (기본값 : true )
추가적인 CSS를 찾는 동안 사용할 다른 스타일 시트와 일치하기위한 additionalStylesheets 시트 배열 <string> glob.
reduceInlineStyles 부울 옵션은 중요한 CSS에 대해 인라인 스타일을 평가 해야하는지 여부를 나타냅니다. 기본적으로 인라인 스타일 태그는 중요한 CS 만 포함하도록 평가 및 다시 작성됩니다. 인라인 스타일을 처리하기 위해 false 로 설정하십시오. (기본값 : true )
preload 전략 을 사용하려는 전략
noscriptFallback 부울 <noscript> ald는 js 기반 전략에 폴백을 추가합니다
inlineFonts 부울 인라인 임계 글꼴-진정 규칙 (기본값 : false )
preloadFonts 부울 예압 중요한 글꼴 (기본값 : true )
inlineFonts + preloadFonts * 값을 설정하기위한 fonts 부울 속기 : 값 :

인라인 임계 글꼴 진정 규칙에 맞는 true 과 글꼴을 사전로드
false

keyframes 문자열 컨트롤 어떤 키 프레임 규칙이 상거되는지 컨트롤.* 값 :

"critical" : (기본값) Inline KeyFrames Critical CSS가 사용하는 KeyFrames 규칙
"all" 모든 키 프레임 규칙을 인화합니다
"none" 모든 키 프레임 규칙을 제거하십시오

부울 compress 크기 크기 CSS (기본값 : true )
logLevel 문자열 컨트롤 플러그인의 로그 레벨 (기본값 : "info" )
logger 객체는 사용자 정의 로거 인터페이스 로거를 제공합니다
includeSelectors regexp | 문자열은 임계 CSS에 포함되어야하는 선택기 목록을 제공합니다. Regexp와 String을 모두 허용합니다.

규칙을 포함/제외하십시오

CSS에 주석을 추가하여 중요한 CSS의 일부로 규칙을 포함 시키거나 제외 할 수 있습니다.

다음 CSS 규칙을 포함/제외 할 단일 줄 주석

 / * CREATTERS : 제외 */. selector1 {/ *이 규칙은 중요한 CSS에서 제외됩니다 */}

.Selector2 {/ * 이것은 정상적으로 평가됩니다 */}/ * Critters : 포함 */. selector3 {/ *이 규칙은 Critical CSS */}에 포함됩니다.

.selector4 { / * 이것은 정상적으로 평가됩니다 * /}

시작 및 엔드 마커를 추가하여 여러 규칙을 포함/제외합니다

 / * CREATTERS : START 제외 */. selector1 {/ *이 규칙은 중요한 CSS에서 제외됩니다 */}

.Selector2 {/ *이 규칙은 중요한 CSS에서 제외됩니다 */}/ * CREATTERS : END 배제 */

 / * Critters : start */. selector3 {/ *이 규칙은 Critical CSS */}에 포함됩니다.

.Selector4 {/ *이 규칙은 중요한 CSS */}/ * CREATTERS : END 포함 */에 포함됩니다.

동물 컨테이너

기본적으로 Critters는 전체 입력 HTML에 대한 CSS를 평가합니다. 동물은 전체 DOM을 재구성하고 CSS 선택기를 평가하여 일치하는 노드를 찾음으로써 중요한 CSS를 평가합니다. 일반적으로 이것은 동물이 가볍고 빠르기 때문에 잘 작동합니다.

경우에 따라 입력 HTML이 매우 크거나 깊게 중첩 될 수있어 재구성 된 DOM을 훨씬 더 크게 만들어서 중요한 CSS 생성 속도를 늦출 수 있습니다. Critters는 뷰포트 크기와 헤드리스 브라우저가 없기 때문에 뷰포트 크기와 특정 노드가 접기 이상인 것을 알지 못합니다.

이 문제를 극복하기 위해 Critters는 Critters 컨테이너를 사용합니다.

Critters 컨테이너는 뷰포트를 모방하며 data-critters-container 접힘 위에있는 HTML 요소를 포함하는 최상위 컨테이너에 추가하여 활성화 할 수 있습니다.

뷰포트의 내용을 대략 추정하고 내용 주위에 <div data-critters-container >를 추가 할 수 있습니다.

 <html>
  <body> <div class = "컨테이너"> <div data-critters-container>/ * html이 컨테이너는 중요한 CSS를 평가하는 데 사용됩니다 */</div>/ * HTML은 중요한 CSS를 평가할 때 무시됩니다 */</ div> <fuxer> </풋내기>
  </body> </html>

참고 : 이것은 동물의 성능을 향상시키는 쉬운 방법입니다.

나무꾼

사용자 정의 로거 인터페이스 :

유형 : 객체

속성

trace 함수 (String)는 추적 메시지를 인쇄합니다
debug 함수 (String)는 디버그 메시지를 인쇄합니다
info 함수 (문자열)는 정보 메시지를 인쇄합니다
warn 함수 (문자열)는 경고 메시지를 인쇄합니다
error 함수 (문자열)는 오류 메시지를 인쇄합니다

로그 레벨

플러그인의 로그 레벨을 제어합니다. 로거가 사용해야하는 레벨을 지정합니다. 로거는 지정된 레벨 아래의 로그 레벨에 대한 출력을 생성하지 않습니다. 사용 가능한 레벨 및 주문은 다음과 같습니다.

"정보" (기본값)
"경고하다"
"오류"
"추적하다"
"디버그"
"조용한"

예압

게으른로드 스타일 시트에 사용하는 메커니즘.

참고 : JS는 JavaScript가 필요한 전략을 나타냅니다 (비활성화되지 않는 한 <noscript> 로 돌아갑니다).

기본값 : 문서 끝으로 스타일 시트 링크를 이동하고 대신에 메타 태그를 삽입하십시오.
"바디": 모든 외부 스타일 시트 링크를 문서 끝으로 이동하십시오.
"미디어": media="not x" 추가하고로드 한 후에는 제거하여 스타일 시트를 비동기로로드합니다. JS
"스왑": 스타일 링크를 rel="stylesheet" 로 바꾸는 예압으로 스타일 시트 링크를 변환합니다 (세부 사항). JS
"Swap-High": <link rel="alternate stylesheet preload"> 사용하고로드되면 rel="stylesheet" 로 바꾸십시오 (세부 사항). JS
"JS": LoadCSS와 유사한 비동기 CSS 로더를 주입하여 스타일 시트를로드하는 데 사용하십시오. JS
"JS-Lazy": "js" 와 마찬가지로 스타일 시트는 완전히로드 될 때까지 비활성화됩니다.
거짓 : 예압 태그 추가를 비활성화합니다.