정보실

웹학교

정보실

css CSS 축소를 위한 완벽한 모범 사례(4)

본문

코드 적용 범위 및 사용되지 않은 코드 


CSS 자체를 축소하는 것이 목표가 아닙니다. 그것은 끝까지의 수단 일 뿐이며, 사용자가 관심 있는 경험에 필요한 올바른 양의 코드를 제공하는 것입니다.


CSS에서 불필요한 공백, 문자 및 서식을 제거하는 것은 올바른 방향의 한 단계이지만, 불필요한 공백과 마찬가지로 응용 프로그램에서 CSS 코드 자체의 어느 부분이 필요하지 않은지 알아 내야 합니다.


응용 프로그램 사용자가 Bootstrap 구성 요소 (및 CSS)의 작은 하위 집합 만 실제로 앱을 빌드하는 데 사용되는 Bootstrap 라이브러리의 모든 구성 요소에 대한 스타일이 포함 된 CSS (최소화 된 CSS)를 다운로드 해야 하는 경우 최종 목표는 실제로 달성 되지 않습니다.


코드 적용 범위 도구를 사용하면 현재 페이지 나 응용 프로그램에서 사용하지 않는 코드 인 데드 코드를 식별 할 수 있습니다. 이러한 코드는 축소 과정에서도 제거되어야 합니다. Chrome DevTools에는 사용되지 않는 코드를 감지하기 위한 검사기가 내장되어 있습니다.


DevTools를 연 상태에서“more”메뉴 옵션 (맨 오른쪽 상단에 3 개의 점)을 클릭 한 다음 More tools를 클릭 한 다음 Coverage를 클릭하십시오.


Chrome DevTools Code Coverage 


이 옵션을 클릭하면 커버리지를 다시 로드하고 캡처를 시작합니다. 앱을 탐색하고 필요한 경우 사용법을 설정하기 위해 몇 가지 작업을 수행하십시오.



Coverage Capturing Options In DevTools 


적용 범위 도구의 주의 깊은 눈 아래에서 마음의 내용에 앱을 사용한 후 계측 중지 범위를 클릭하고 결과를 빨간색 버튼으로 표시하십시오.


해당 페이지 또는 사용 세션에 대한 로드 된 리소스 및 적용 범위 메트릭 목록이 표시됩니다. 사용 된 리소스 항목의 비율과 사용되지 않은 리소스 비율을 즉시 확인할 수 있으며 각 항목을 클릭하면 사용 된 코드 (녹색)와 사용되지 않은 (빨간색) 부분이 표시됩니다.


Coverage Results In DevTools 


우리의 경우 Chrome DevTools는 HTML에서 .pull-right 및 .pull-left CSS 클래스를 사용하는 곳을 감지하지 못했기 때문에 사용하지 않는 코드로 표시했습니다. 또한 CSS의 84 %가 사용되지 않았다고 보고 합니다. 이것은 곧 알 수 있듯이 절대적인 것은 아니지만 축소 프로세스 중에 CSS를 정리할 영역을 조사 할 위치를 명확하게 나타냅니다.


사용하지 않는 CSS 결정 및 제거 


사용하지 않는 CSS 코드를 제거하는 것은 신중하게 수행되고 테스트 되어야 한다는 말로 시작해야 합니다. 그렇지 않으면 앱의 일시적 상태에 필요한 CSS (예 : 재생 중 오류 메시지를 표시하는 데 사용되는 CSS)가 제거 될 수 있습니다. 이러한 오류가 발생하면 UI에서. 로그인 한 사용자와 로그인하지 않은 사용자의 CSS 또는 주문이 배송 한 오버레이 메시지를 표시하는 CSS는 어떻습니까?


다음 기술을 적용하여 사용하지 않는 CSS 제거에 보다 안전하게 접근하여 최종 축소 CSS 코드를 더 많이 절약 할 수 있습니다.


필요한 CSS 만 추가하면 됩니다! 


이 기술은 코드 분할 및 번들링의 활용을 강조합니다. JavaScript를 모듈화하고 경로 또는 구성 요소에 필요한 파일 내의 모듈, 파일 또는 함수 만 가져와 코드 분할을 입력 할 수 있는 것처럼 CSS에서도 동일한 작업을 수행해야 합니다.


즉, Material Design UI 라이브러리의 전체 CSS를 로드하는 대신 (예 : CDN을 통해) 특정 페이지 또는 뷰에 필요한 BUTTON 및 DIALOG 구성 요소의 CSS 만 가져와야 합니다. 컴포넌트를 빌드하고 CSS-in-JS 접근 방식을 채택하고 있다면 번 들러가 덩어리로 제공하는 모듈 식 CSS를 이미 가지고 있다고 생각합니다.



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 41회 ]  작성일19-08-08 17:10

웹학교