SCSS 컴파일시 압축이 필요합니까?

SCSS + Compass 환경에서 SCSS 컴파일 할 때 조금이라도 파일 크기를 줄여 성능을 향상시키고 싶을 때 "compressed"를 지정한다고 생각합니다.

이 지정은 CSS 파일로 출력할 때 모든 개행 코드가 제거되어 한 줄로 정리됩니다.

예) config.rb 파일에서 output_style 지정

# You can select your preferred output style here (:expanded, :nested, :compact
# or :compressed).
output_style = :compressed

예):compressed 지정시, 개행이 제거되어 토출된 CSS 파일



그러나 개행 코드를 제거해도 원래의 파일 사이즈와 비교해 겨우 10% 정도밖에 작아지지 않습니다. 이것으로 성능에 미치는 영향은 미미합니다.

CSS 파일이 압축될 때의 문제점

그것만이라면 아무것도 문제는 없습니다만, 1행에 모든 CSS코드가 끼워져 있어 차분이 추출하기 어려운 상태 때문에, Git 병합할 때 반드시라고 말해도 좋을 만큼 컨플릭트가 발생해 버립니다 합니다.
그 때마다, SCSS 컴파일 다시 한번 다시 Git 병합하는 작업을 실시하게 되어 버립니다.

자주 발생하는 Git 충돌을 피하려면 :compressed 대신 :expanded 또는 :nested를 지정하는 것이 좋습니다.

output_style = :expanded   #:expanded or :nested

CSS 파일 압축은 gzip이 효과적

그래도 파일 크기는 조금이라도 작고 싶다면 gzip 압축하는 것이 더 효과적입니다. 70~80% 정도까지 작아진다고 합니다.

gzip 압축을 하려면, Apache의 mod_deflate 모듈을 이용하거나, Drupal을 사용하고 있는 경우는 컨트리뷰트 모듈 「 Advanced CSS/JS Aggregation 」등을 도입하는 것이 좋다고 생각합니다.

(보충) Drupal - Advanced CSS/JS Aggregation 모듈

Advanced CSS/JS Aggregation 모듈을 사용했을 경우, gzip 압축된 파일은 sites/default/files/css/에 출력되어 그 파일이 브라우저에 출력되게 됩니다. Drupal 캐시 지우기가 실행될 때까지 파일이 계속 사용됩니다.

즉, 원래 CSS 파일이 압축되지 않으므로 Git 병합할 때 발생하는 충돌 문제를 피할 수 있습니다.
SCSS + Compass의 파일 압축을 끄고 Advanced CSS/JS Aggregation 모듈의 캐시 기능을 이용하면 운용도 편해질 것입니다.