CSS 최적화: clean-css 사용법

CSS 작업을 하다 보면 파일이 10만 줄이 넘어가는 경우도 발생합니다.

이때 긴 줄이나 주석이 그대로 남아 있으면 Lighthouse에서 경고가 발생할 수 있습니다.

CSS 파일의 용량이 크면 다운로드 속도에도 문제가 생길 수 있어 최적화가 필요합니다.

clean-css 추천

이러한 문제를 해결하기 위해 clean-css를 사용해 CSS 파일을 간편하게 최적화할 수 있습니다.

이 기능은 HTML과 CSS만 사용하는 분들에게는 필요할 수 있지만,

성능을 개선하고자 하는 모든 개발자에게 유용합니다.

clean-css 설치

먼저, clean-css를 글로벌로 설치합니다:

npm install clean-css-cli -g

CSS 파일 최적화

그 다음, 원하는 경로에서 CSS 파일을 최소화(minify)할 수 있습니다.

예를 들어, 상위 폴더에서 다음 명령어를 실행하면 됩니다:

 

cleancss -o dist/styles.min.css src/styles.css

이 명령어는 src/styles.css 파일을 압축하여 dist/styles.min.css 파일로 저장합니다.

 

예제 .min.css

이렇게 바뀝니다

 

자동화 설정

단, clean-css는 파일이 자동으로 최적화되지 않으므로 주의가 필요합니다.

이를 위해 nodemon을 이용하여 파일 변경 시 자동으로 명령을 실행하도록 설정할 수 있습니다.

 

nodemon 설치:

npm install nodemon --save-dev

 

nodemon 구성:

프로젝트의 루트 디렉토리에 nodemon.json을 생성하고 아래와 같이 설정합니다:

{
  "watch": ["src"],
  "ext": "css",
  "exec": "cleancss -o dist/styles.min.css src/styles.css"
}

 

nodemon 실행:

npx nodemon

 

이렇게 설정하면, src 디렉토리 내의 CSS 파일이 변경될 때마다 clean-css가 실행되어 자동으로 CSS 파일이 최적화됩니다.

마무리

오늘은 CSS 최적화에 대해 설명드렸습니다. clean-css와 nodemon을 활용하면 긴 CSS 파일도 손쉽게 관리할 수 있습니다. 성능을 고려한 CSS 작업에 도움이 되길 바랍니다.