스타일 시트에서 HTML로만 사용 된 스타일을 추출하십시오.

Question

지난 렌더링 차단 CSS를 가져 와서 내 사이트의 성능을 향상 시키려고합니다. 하나의 파일 만 문제가되는 것 같아요. CDN에서 얻은 미니 부트 스트랩 스타일 시트입니다. 여러 가지 방법을 시도했지만 아무 것도 효과가 없었습니다. 내 프로젝트에 부트 스트랩 CDN 스타일 시트 사본을 갖고 싶습니다. 편집하여 현재 내 사이트에서 사용중인 CSS 만 가지고 있습니다. 사이트를 직렬화하고 스타일 시트에서 사용되지 않는 스타일을 제거 할 수 있습니까? 몇 가지 다른 테이크를 읽었지만 대부분은 Chrome 외에도 브라우저에서 작동하지 않으며 스타일 시트에서 미디어 쿼리를 때릴 수 있습니다.

Answer 1

github 및 npm에는 여러 가지 중요한 CSS 도구가 있습니다. 가장 큰 것은 아마도 https://github.com/addyosmani/critical 일 것입니다. 원하는 작업을 정확하게 수행하기위한 무언가 작성 작업을 정의 할 수 있습니다. HTML 페이지를 열고 사용 된 스타일을 파악한 다음이를 기반으로 스타일 시트를 만듭니다.

예 대부분 이러한 도구에는 고급 CSS 항목에 몇 가지 문제가 있지만 미디어 키어를 지원하는 것으로 보입니다. 그 github repo에 논의되는 많은 문제가 있지만 그들은 매우 구체적인 것들을위한 것 같습니다 그래서 하나의 좋은 징조로 셀 수 있습니다 - 그것은 인기 있고 유지 관리.