CSS @import 인한 성능과 문제점

import 규칙 문제점

일반적으로 @import 규칙을 많이 사용하고 있지만 css 성능 향상을 생각한다면 그렇게 좋은 방법은 아니다.

그 이유는 @import 규칙으로 불러들인 CSS 파일은 그 갯수 만큼 서버에서 요청(request)이 늘어남으로써 로딩 속도에 상당한 악영향을 미친다.

소규모 프로젝트에서는 크게 상관이 없을지도 모르지만 @import 규칙은 병렬방식이 아닌 직렬 방식으로 다운로드하기 때문에

전체 로딩시 그 만큼의 로딩 시간도 길어지는 문제점이 있다.

심지어 인터넷 익스플로러(IE)에서는 다운로드 순서가 다르게 작동하는 문제가 발생하기도 한다.

다시 말해서, 각 역할에 따라 분리한 CSS 파일을 웹 문서에 적용할 때는 @import 규칙으로 호출하면 안되고, HTML 문서에서 <link> 요소를 사용하여 호출하는 방법을 권장한다.

아래의 링크는 위의 내용에 대한 문제점이 잘 정리되어 있다.

http://www.clearboth.org/css-link-vs-import

이처럼 @import 규칙으로 스타일을 관리하는 데는 문제가 있다.

하지만 grunt, gulf 의 concat-css 모듈을 사용하면 @import 규칙을 사용하는데 전혀 문제가 없다.

해당 모듈은 @import 규칙으로 호출한 파일을 병합하여 하나의 CSS 파일로 만들기 때문에 위와 같은 이슈가 깨끗히 해결된다.

Jaehee's WebClub