100배 빠른 Lightning CSS의 특징과 장점, 단점

 

Lightning CSS는 Rust로 작성된 CSS 전처리기 및 포스트프로세서로, 최신 CSS 기능을 지원하면서도 뛰어난 성능을 제공합니다. Rust는 메모리 효율성을 극대화 하도록 설계된 시스템 프로그래밍 언어입니다.

 

주요 특징 (장점과 단점)

장점

1. 속도: Lightning CSS는 자바스크립트 기반의 도구들보다 100배 이상 빠릅니다. 단일 스레드에서 초당 270만 줄 이상의 코드를 최소화할 수 있습니다.

2. 현대적 CSS 기능 지원: CSS 중첩, 커스텀 미디어 쿼리, 고감도 색상 공간, 논리적 속성, 새로운 선택자 기능 등을 사용할 수 있으며, 이를 자동으로 호환 가능한 구문으로 변환해줍니다.

3. CSS 모듈 지원: 클래스, 아이디, @keyframes, CSS 변수 등을 로컬 범위로 제한하여 CSS 파일 간의 이름 충돌을 방지합니다. 원래 이름과 스코프된 이름의 매핑을 생성하여 JavaScript에서 사용할 수 있으며, 사용되지 않는 클래스와 변수를 트리쉐이킹 할 수 있습니다.

 

단점

1. 학습 곡선: 새로운 도구이기 때문에 처음에는 학습이 필요할 수 있습니다.

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,
}])

2. 커뮤니티 지원: 커뮤니티가 상대적으로 작습니다.

3. 호환성 문제: 일부 프로젝트에서는 기존 시스템과의 호환성 문제가 발생할 수 있습니다. (실제 도입한 프로젝트 찾기가 힘들었습니다.)

 

결론

초기 렌더링 속도 개선은 사용자 이탈율을 줄이는 데 도움을 줍니다. CSS 최적화를 통해 사용자 경험을 향상 시켜보는 건 어떠신가요?