2017-10-20 11 views
4

98,000 %가 사용되지 않은 19,000 줄의 CSS 파일에서 사용 된 CSS를 추출해야합니다 (ouch).페이지에서 CSS 추출 사용

enter image description here

을하지만 당신도 녹색 선으로 이동하는 것을 허용하지 않습니다 난 당신과 같이, CSS의 범위를 볼 수 크롬 개발자 도구를 사용할 수 있습니다 알고 있습니다. 수동으로 19K 라인을 통과하는 것은 실현 가능하지 않습니다.

크롬 라이트 하우스는 개발자 도구와 마찬가지로 필요한 규칙 만 볼 수있는 옵션을 제공하지 않습니다.

많은 사이트에서 권장하는 Firefox의 "CSS Usage"부가 기능을 사용해 보았지만 현재는 FireFox의 최신 버전과 호환되지 않는 FireBug가 필요합니다.

어떻게 든 사용되는 CSS를 제거하는 방법에 대해 누구나 생각할 수 있습니까?

+1

당신이 htt를 살펴 않았다 추신 : //github.com/purifycss/purifycss 이미? –

+0

_ "하지만 파이어 폭스의 최신 버전에서는 호환되지 않는 FireBug가 필요합니다."_ - 파이어 폭스의 모든 이전 버전은 인류의 기억이 아닐지라도 인터넷에서 완전히 삭제되었습니다. https://ftp.mozilla.org/pub/firefox/releases/와 같은 것만 존재했습니다. – CBroe

+0

나는 같은 질문을했다. -> https://stackoverflow.com/questions/44633247/how-to-save-the-results-analysed-by-the-chromes-coverage-tool :) 당신은 더 운이 좋겠다. – Morpheus

답변

2

희망이 당신이

https://uncss-online.com/

단지 오른쪽 왼쪽과 CSS에서 HTML을 추가하는 데 도움이됩니다. ok btn을 클릭 한 다음 마법을 확인하십시오

css에 오류가있는 경우 해당 행 번호에서 해당 오류를 제거 할 것인지 묻습니다.

이것은 내 프로젝트의 일부 PurifyCSS를 사용하는 가장 쉬운 메도 :

+1

이것은 이상한 물건을 꺼 냈지만, 좋은 물건을 꺼냈다. 네가 붙어 있다면 확실히 개선 될거야. –

2

입니다. 가벼운 CSS를 유지할 수있게 도와줍니다.

말라 '프로젝트 구조 및 워크 플로우에 대해 알고 있지만 자습서의 톤이 거기 밖으로 :

https://webdesign.tutsplus.com/tutorials/remove-unnecessary-css-with-purifycss-and-grunt--cms-27726

하지 않는 CSS를 제거하기위한 몇 가지 온라인 솔루션도 있습니다

https://survivejs.com/webpack/styling/eliminating-unused-css/

, 결코 생각 해본 :

https://uncss-online.com/

+0

팁 : 외부 링크를 게시하는 것이 아니라 실제로 설명하는 것이 좋습니다. 링크가 생각보다 빨리 사라지기 때문입니다. –

+0

의미가 있습니다. 나는 이것을 명심 할 것이다. 고마워, 척 –