속도 체감을 위한 css 정리 > 팁자료실

 Node.js 설치 및 PurgeCSS를 사용한 CSS 최적화 과정을 다시 정리해드리겠습니다.

Node.js 설치

1. Node.js 설치 확인

   • 먼저, 시스템에 Node.js가 설치되어 있는지 확인합니다.
     bash

     코드 복사

     node --version

2. Node.js 설치

   • Node.js가 설치되어 있지 않은 경우, 공식 웹사이트에서 다운로드 받아 설치합니다: Node.js 공식 웹사이트

PurgeCSS 설치 및 사용

1. PurgeCSS 설치

   • npm을 이용하여 PurgeCSS를 전역으로 설치합니다.
     bash

     코드 복사

     npm install -g purgecss

2. PurgeCSS 실행

   • 웹 페이지에서 사용되는 CSS 파일을 최적화합니다.
     bash

     코드 복사

     purgecss --css /path/to/your/css/style.css --content '/path/to/your/php/files/*.php' --output /path/to/your/build/
     • --css : 최적화할 CSS 파일의 경로를 지정합니다.
     • --content : CSS에서 참조하는 PHP 파일들의 경로를 지정합니다.
     • --output : 최적화된 CSS 파일이 생성될 경로를 지정합니다.

3. 최적화된 CSS 사용

   • PurgeCSS가 생성한 최적화된 CSS 파일을 웹 페이지에 적용합니다.
   • 필요에 따라 원본 CSS 파일을 백업하고, 최적화된 CSS 파일로 교체합니다.

추가 팁

• 테스트: PurgeCSS를 실행하기 전에 웹 페이지에서 사용되는 모든 CSS 클래스와 요소를 정확히 확인하고 경로를 지정하세요.
• 백업: 원본 CSS 파일을 백업하고, 최적화된 CSS 파일이 예상대로 작동하는지 테스트해보세요.
• 자동화: 정기적으로 PurgeCSS를 실행하고, 자동으로 최적화된 CSS 파일을 적용하는 스크립트를 작성하여 작업을 자동화할 수 있습니다.
• 테스트 환경: 개발 환경과 프로덕션 환경에서 동작을 테스트하고, 예상치 못한 문제가 발생하지 않도록 주의하세요.

이러한 방법을 통해 사용되지 않는 CSS 코드를 제거하고, 웹 페이지의 성능을 향상시킬 수 있습니다.