Lightning CSS는 Rust로 작성된 CSS 전처리기 및 포스트프로세서로, 최신 CSS 기능을 지원하면서도 뛰어난 성능을 제공합니다. Rust는 메모리 효율성을 극대화 하도록 설계된 시스템 프로그래밍 언어입니다.
주요 특징 (장점과 단점)
장점
-
속도: Lightning CSS는 자바스크립트 기반의 도구들보다 100배 이상 빠릅니다. 단일 스레드에서 초당 270만 줄 이상의 코드를 최소화할 수 있습니다.
-
현대적 CSS 기능 지원: CSS 중첩, 커스텀 미디어 쿼리, 고감도 색상 공간, 논리적 속성, 새로운 선택자 기능 등을 사용할 수 있으며, 이를 자동으로 호환 가능한 구문으로 변환해줍니다.
-
CSS 모듈 지원: 클래스, 아이디, @keyframes, CSS 변수 등을 로컬 범위로 제한하여 CSS 파일 간의 이름 충돌을 방지합니다. 원래 이름과 스코프된 이름의 매핑을 생성하여 JavaScript에서 사용할 수 있으며, 사용되지 않는 클래스와 변수를 트리쉐이킹 할 수 있습니다.
단점
-
학습 곡선: 새로운 도구이기 때문에 처음에는 학습이 필요할 수 있습니다.
Background([Background {
image: Url(Url { url: "img.png" }),
color: CssColor(RGBA(RGBA { red: 0, green: 0, blue: 0, alpha: 0 })),
position: Position {
x: Length(Dimension(Px(20.0))),
y: Length(Dimension(Px(10.0))),
},
repeat: BackgroundRepeat {
x: Repeat,
y: Repeat,
},
size: Explicit {
width: LengthPercentage(Dimension(Px(50.0))),
height: LengthPercentage(Dimension(Px(100.0))),
},
attachment: Scroll,
origin: PaddingBox,
clip: BorderBox,
}])-
커뮤니티 지원: 커뮤니티가 상대적으로 작습니다.
-
호환성 문제: 일부 프로젝트에서는 기존 시스템과의 호환성 문제가 발생할 수 있습니다. (실제 도입한 프로젝트 찾기가 힘들었습니다.)
결론
초기 렌더링 속도 개선은 사용자 이탈율을 줄이는 데 도움을 줍니다. CSS 최적화를 통해 사용자 경험을 향상 시켜보는 건 어떠신가요?