CSS Optimizer로 CSS를 조정합니다

CSS 압축 : 웹 사이트 속도를 향상시키는 강력한 도구

코어 포인트 :

CSS 압축은 코드 중복 문자를 제거하여 파일 크기를 줄여 다운로드 속도를 높이고 데이터 전송을 저장합니다. CSSO (CSSO)는 명령 줄 인터페이스에 익숙 해야하는 node.js 기반 압축 도구입니다. CSSO는 불필요한 공간, 세미콜론 및 주석을 제거 할뿐만 아니라 중복 선택기와 선언 블록을 병합, 덮어 쓰기 속성 삭제 및 단축 색상 코드를 병합하여 최적화합니다.

CSS를 압축하면 웹 사이트 성능을 향상시킬 수 있지만 코드를 읽고 디버깅하기가 어렵습니다. 따라서 개발 목적으로 원래의 압축되지 않은 CSS 파일을 유지하는 것이 좋습니다.

(다음은 Tiffany Brown이 작성한 "The Mas 개발자 도구는 렌더링 문제를 찾고 수정하는 데 도움이 될 수 있지만 얼마나 효율적입니까? 파일 크기가 최소화 되었습니까? 이를 위해서는 압축 도구가 필요합니다.
• CSS의 맥락에서 압축은 단순히 과도한 문자를 제거하는 것을 의미합니다. 예를 들어 다음 코드 블록을 고려하십시오
이 코드에는 라인 브레이크와 공백이 포함되어 있으며 길이는 98 바이트입니다. 압축 된 예를 살펴 보겠습니다 :
• 이제 우리의 CSS의 길이는 80 바이트이며 18%감소합니다. 물론 바이트가 적을수록 다운로드 속도가 빨라지고 귀하와 사용자가 전송할 데이터가 적습니다.
이 섹션에서는 Node.js 기반 압축 도구 인 CSS (CSS Optimizer)를 소개합니다. CSSO를 설치하려면 먼저 Node.js 및 NPM을 설치해야합니다. NPM은 Node.js 설치 프로세스의 일부로 설치되므로 하나의 패키지 만 설치하면됩니다.
• CSSO를 사용하려면 명령 줄 인터페이스에 익숙해야합니다. Linux 및 OS X 사용자는 터미널 응용 프로그램 (OS X, Applications & GT; 터미널 응용 프로그램)을 사용할 수 있습니다. Windows를 사용하는 경우 명령 프롬프트를 사용하십시오. 시작 또는 Windows 메뉴로 이동하여 검색 창에서 CMD를 입력하십시오.
CSSO 설치 node.js 및 npm을 설정 한 후 CSSO를 설치할 수 있습니다. 명령 줄 프롬프트에서 다음을 입력하십시오

CSSO를 전 세계적으로 설치하여 명령 줄에서 사용할 수 있도록 플래그. OS X 및 Linux 사용자는 Sudo ()를 사용해야 할 수도 있습니다. NPM이 설치 경로를 명령 줄 창과 명령 줄 프롬프트로 인쇄하면 그림 3.25와 같이 성공적으로 설치되었음을 알 수 있습니다. 그림 3.25 Windows 명령 프롬프트를 사용하여 CSSO를 설치합니다 이제 우리는 CSS를 압축 할 준비가되었습니다.

CSSO를 사용하여 압축합니다 CSS 파일을 압축하려면 CSSO 명령을 실행하고 파일 이름을 매개 변수로 전달합니다.

이것은 기본 압축을 수행합니다. CSSO는 CSS 입력 파일에서 불필요한 공간, 추가 세미콜론 및 주석을 제거합니다. csso style.css 완료 후 CSSO는 최적화 된 CSS를 표준 출력, 즉 현재 터미널 또는 명령 프롬프트 창으로 인쇄합니다. 그러나 대부분의 경우 해당 출력을 파일에 저장하려고합니다. 이렇게하려면 두 번째 매개 변수를 압축 파일의 이름 인 CSSO로 전달하십시오. 예를 들어, Compressed 버전의 Style.css를 Style.min.css로 저장하려면 다음 명령을 사용합니다.

기본적으로 CSSO는 CSS의 일부를 재정렬합니다. 예를 들어, 선언 블록을 중복 선택기와 병합하고 덮어 쓰기 속성을 제거합니다. 다음 CSS를 고려하십시오

csso style.css style.min.css

이 코드 세그먼트에서 는 이전 body { margin: 20px 30px; padding: 100px; margin-left: 0px; } 선언을 덮어 씁니다. 또한 지속적인 선언 블록의 선택기로 를 재사용했습니다. 최적화 및 압축 후, 우리는 다음을 얻습니다

CSSO는 불필요한 공간, 신생 및 세미콜론을 삭제하고

로 단축합니다. CSSO는 또한 h1 { font: 200 36px / 1.5 sans-serif; } 및 속성을 ​​선언 ()으로 병합하고 별도의 선택기 블록을 하나로 결합합니다. 이제 CSSO가 CSS를 어떻게 재 작성하는지 의심하면 리팩토링 기능을 비활성화 할 수 있습니다.

또는 로고 만 사용하십시오. 예를 들어, 를 실행하면 다음 결과가 나타납니다.

이제 우리의 CSS는 압축되었지만 최적화되지 않았습니다. 리팩토링을 비활성화하면 CSS 파일이 최소 크기에 도달하지 못하게됩니다. 문제가 발생하지 않는 한 리팩토링을 비활성화하지 마십시오. 9 장에 도입 된 전 처리기는 공구 세트에서 압축 기능을 제공하지만 CSSO를 사용하면 파일 크기가 더욱 줄어 듭니다. h1 { color: #ff6600; } CSS Optimizer를 사용하여 CSS 에 대한 자주 묻는 질문 웹 개발에서 CSS 압축의 중요성은 무엇입니까?

CSS 압축은 CSS 파일의 크기를 줄이는 데 도움이되기 때문에 웹 개발의 중요한 측면입니다. 파일 크기가 줄어들면 웹 사이트로드가 더 빨라져서 더 나은 사용자 경험을 제공합니다. 압축 된 CSS 파일은 코드의 기능에 영향을 미치지 않는 공백, 줄 브레이크 및 주석과 같은 불필요한 문자를 제거합니다. 이 프로세스는 특히 인터넷 연결이 느린 사용자에게 웹 사이트의 성능을 크게 향상시킬 수 있습니다.

CSS Optimizer는 어떻게 작동합니까? margin-left CSS 코드를 분석하고 불필요한 문자 및 중복성을 제거하여 CSS Optimizer는 작동합니다. 공백, 라인 브레이크 및 댓글을 제거하고 코드 구조를 단순화하여 CSS 파일을 압축합니다. 이로 인해 파일 크기가 작고 웹 브라우저에서 더 빠른 다운로드가 발생하여 웹 사이트의 전반적인 성능이 향상됩니다. margin CSS 압축의 위험은 무엇입니까?

CSS를 압축하면 웹 사이트의 성능을 크게 향상시킬 수 있지만 코드를 읽고 디버그하기가 더 어려워 질 수도 있습니다. 프로세스가 코드를 쉽게 읽을 수 있도록 모든 형식과 주석을 제거하기 때문입니다. 따라서 디버깅 및 개발을 위해 원래의 원래 CSS 파일을 유지하는 것이 좋습니다.

CSS를 수동으로 압축 할 수 있습니까?

예, 모든 불필요한 문자를 제거하고 코드를 단순화하여 CSS를 수동으로 압축 할 수 있습니다. 그러나이 프로세스는 특히 더 큰 CSS 파일의 경우 매우 시간이 많이 걸리고 오류가 발생할 수 있습니다. 이 프로세스는 CSS Optimizer와 같은 도구를 사용하여 자동화하여 CSS가 정확하고 효율적으로 압축되도록합니다.

CSS Optimizer를 사용하는 방법은 무엇입니까?

CSS Optimizer를 사용하려면 CSS Optimizer 웹 사이트의 입력 필드에 CSS 코드를 붙여 넣고 "Optimizer"버튼을 클릭하십시오. 그런 다음이 도구는 코드를 분석하고 웹 사이트에서 복사하여 사용할 수있는 압축 버전을 제공합니다.

CSS가 내 웹 사이트의 기능에 영향을 미칩니 까?

아니요, CSS 압축은 웹 사이트의 기능에 영향을 미치지 않습니다. 이 프로세스는 불필요한 문자 만 제거하고 코드를 단순화하지만 브라우저가 CSS 규칙을 해석하는 방식을 변경하지는 않습니다. 따라서 웹 사이트의 모양과 기능은 동일하게 유지되지만 파일 크기가 작기 때문에 더 빠르게로드됩니다.

대형 CSS 파일에 CSS Optimizer를 사용할 수 있습니까?

예, CSS Optimizer는 대형 CSS 파일을 처리 할 수 ​​있습니다. 그러나 파일이 클수록 도구가 코드를 분석하고 압축하는 데 더 오래 걸립니다. 그럼에도 불구하고 대형 CSS 파일의 경우 CSS Optimizer를 사용하는 것이 코드를 수동으로 압축하는 것보다 더 효율적이고 정확합니다.

CSS Optimizer가 무료로 사용할 수 있습니까?

예, CSS Optimizer는 CSS 코드를 압축하는 데 사용할 수있는 무료 도구입니다. 웹 기반 도구이므로 사용하려면 다운로드하거나 설치할 필요가 없습니다. CSS Optimizer 웹 사이트를 방문하여 CSS 코드를 붙여 넣으면 압축 버전이 나타납니다.

CSS를 변경 해야하는 경우이 프로세스를 반전 할 수 있습니까?

예, 원래 압축되지 않은 CSS 파일을 사용 하여이 프로세스를 반전 할 수 있습니다. 이것이 원래 CSS 파일의 사본을 압축하기 전에 보관하는 것이 좋습니다. 코드를 변경하거나 디버깅 해야하는 경우 원본 파일을 사용한 다음 완료되면 다시 압축 할 수 있습니다.

내 웹 사이트의 성능을 향상시키기 위해 CSS 압축과 결합 할 수있는 다른 관행은 무엇입니까?

CSS를 압축하는 것 외에도 HTML 및 JavaScript 파일도 압축 할 수도 있습니다. 웹 사이트의로드 시간을 더욱 줄일 수 있습니다. 다른 관행에는 이미지 최적화, CDN (Content Distribution Networks) 사용, 압축 가능성 및 브라우저 캐싱 구현이 있습니다. CSS 압축과 결합 된 이러한 관행은 웹 사이트의 성능 및 사용자 경험을 크게 향상시킬 수 있습니다.

위 내용은 CSS Optimizer로 CSS를 조정합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!