문제

동료분과 내가 어느 시점부터 HMR이 느려지기 시작했고 크게 체감되기 시작하자 서로 원인을 찾아보기로 했다.

문제 해결 과정

1. 우선 깃 브랜치를 스위칭 해보면서 어느 시점부터 느려지기 시작했는지 파악했다.
2. Tailwind CSS의 최신 버전 피처를 사용하기 위해 major 버전을 올리는 작업을 한 뒤 느려지기 시작한 걸 파악했다.
3. Tailwind CSS 깃허브 이슈에 HMR이 느려진 사례를 검색해보니 이미 이슈가 생성되어 있었다.
4. 이유는 다음과 같았다.
   1. Tailwind CSS 버전을 올리면서 모든 클래스가 담긴 CSS 파일을 생성해두는게 아니라 빌드 타임에 소스에 들어있는 class만 파악해서 CSS 파일을 만드는 방식으로 바뀌게됐다.
   2. 우리는 소스에 담겨있지 않고 CMS에 담겨있는 클래스가 많아서 tailwind config에 safelist를 사용해서 몇몇 클래스를 강제로 생성되도록 해야했다.
   3. Tailwind CSS 최신 버전에서 opacity 관련된 class가 나오면서 클래스도 양이 방대해졌다. ex) bg-white/0 ~ 100 (5 단위) 무려 기존의 20배에 달하는 클래스가 생겼다. 여기다가 hover: 등등 가상 클래스 붙이면 기하급수적으로 클래스의 양이 늘어난다.
5. safelist는 정규식이 매칭되는 class만 생성하는데 opacity 붙은 클래스를 생성을 안하도록 수정했다. ex) /^bg-white[^/]+$/ 의 [^/]을 추가하여 슬래쉬가 붙은 클래스는 생성하지 않도록 함