[CSS 압축] css-mangle-webpack-plugin을 소개합니다.

 

CSS 작업을 할때 사용되는 식별자인 변수, 클래스, 아이디 이름을 --a, .a, #a와 같이 압축하는 웹팩 플러그인을 개발하였습니다. 참고로 식별자 이름을 a, b, c 형태로 난독화하면서 동시에 압축하는 것을 보통 맹글(Mangle)이라고 합니다.

 

사용 방법은 그냥 제공되는 플러그인을 추가하면 됩니다. 다만 클래스와 아이디의 경우, 식별하는 것이 다소 까다롭기 때문에 어느정도 테스트하고 그만큼 안정화되면 추후에 기능이 기본적으로 활성화될 예정이며 혹시 사용하실 분들은 해당 플러그인은 2024-08-26, 즉 업로드 시간 기준으로 개발 버전이므로 해당 패키지를 자주 업데이트 시도해주셨으면 좋겠습니다.

 

변수 이름의 경우 식별하는데 어렵지 않고 JS에서 참조하는 대부분의 경우를 커버합니다. 물론 리액트에서도 사용가능합니다. (React, Preact, Nest 에서 테스트 완료)

 

npm install css-mangle-webpack-plugin --save-dev

 

자세한 내용은 아래 NPM 사이트의 README.md를 참고해주세요.

css-mangle-webpack-plugin