패키지 배포 이후 storybook 로딩 느려짐 현상

History

• UI 패키지 배포를 하였다.
⇒ 패키지 설정으로 인해 진입점이 빌드된 파일을 바라보게 된 상황

Issue

• AS-IS
⚠️
화면 노출까지 1분 정도 소요된다는게 말이 안됐다.. + 컴포넌트는 소스 파일을 직접 참조하고 프로바이더는 빌드 파일로 접근하는 방식도 요상했다..
• 접근 방식
• StyleProvider는 패키지로부터 직접 접근 (@ladb-slot-booking/ui)
• ui 컴포넌트는 소스 파일로 접근 (../../ui/src/*.stories.tsx)
• 소요 시간
• dev서버 시작 : 약 12초 소요
• 화면 노출 : 약 59초 소요

• TO-BE
• 접근 방식
• StyleProvider도 상대 경로를 통해 소스 파일로 접근 (../../ui/src/)
• ui 컴포넌트도 소스 파일로 접근 (../../ui/src/*.stories.tsx)
• 소요 시간
• dev 서버 시작 : 약 3초
• 화면 노출 : 약 8초

Solution

• StyleProvider를 패키지로부터 직접 접근하는 경우
• 패키지 내부의 dist 디렉토리에서 전체 라이브러리 코드를 로드하게 된다. ⇒ 라이브러리의 모든 구성 요소와 종속성을 포함할 수 있어 로드되어야 할 데이터가 많아짐

• StyleProvider를 상대 경로를 통해 소스 파일로 접근하는 경우
• 필요한 스타일 관련 코드만 로드하기 때문에 훨씬 적은 양의 데이터와 적은 양의 처리를 함