CSS를 안전하게 축소하는 방법

작동 원리

축소기는 /* 주석 */을 제거하고 공백을 단일 공백으로 축소하며 { } : ;와 같은 구조적 구두점 주위의 공백을 제거합니다. , > 및 닫는 중괄호 앞에 마지막 세미콜론을 삭제합니다. 선택기 이름을 바꾸거나 규칙을 병합하거나 계단식 배열을 재정렬하지 않습니다.

• 보수적인 축소기: 사용하지 않는 규칙을 제거하거나 값을 다시 쓰지 않습니다. 나중에 항상 스타일시트를 다시 테스트하세요.

왜 중요한가요?

렌더링 차단 CSS의 모든 킬로바이트는 첫 번째 페인트를 지연시킵니다. 축소는 사용되지 않는 규칙을 제거한 후 사용할 수 있는 가장 저렴한 승리이며, 입증된 중복 문자에만 영향을 미치는 도구는 스타일시트를 재정의하지 않고도 빌드 단계에서 신뢰할 수 있습니다.

실제 사례

.card { color: red; 패딩: 10px 20px; }는 .card{color:red;padding:10px 20px}가 되어 규칙당 수십 바이트를 절약하고 실제 스타일시트에서는 훨씬 더 많은 바이트를 절약합니다.

일반적인 실수

• 사양에서 요구하는 calc() 내부의 + 및 - 주변 공백을 제거합니다.
• 컴파일된 CSS 대신 SCSS 또는 LESS를 축소합니다.
• 축소 후 육안 검사를 건너뜁니다.

실용적인 팁

버전 제어에서 축소되지 않은 소스를 유지하고 빌드 출력으로 축소합니다. 폴백과 함께 사용자 정의 속성을 사용하는 경우 DevTools에서 계산된 스타일을 전후로 비교하세요. 계단식 배열은 유지되지만 손실된 공간 하나가 값의 구문 분석 방식을 변경할 수 있습니다.

사용방법

1. 도구를 엽니다. 모든 것이 브라우저 탭에서 실행됩니다.
2. 입력 내용을 붙여넣거나 입력한 후 필요한 작업을 선택하세요.
3. 결과를 확인하고 한 번의 클릭으로 복사하세요.

도구 열기

일반적인 질문