프론트엔드
Loopin의 vault 경량 엔트리 적용기
두줄요약
배럴 import 때문에 필요한 컴포넌트 하나가 패키지 전체를 끌고 오는 문제를 해결했습니다. 경량 서브패스 엔트리를 추가해 번들을 크게 줄이고 재사용성을 유지했습니다.
문제 상황
- Loopin 채팅에서 vault의
FileDownloadItem하나를 가져오려 했지만, 배럴 import 때문에 패키지 전체가 따라오는 문제 발생 - 결과적으로
pnpm-lock.yaml증가, 불필요한 PDF 뷰어 워커와 여러 무거운 의존성이 번들에 포함
원인 분석
src/index.ts와components/index.ts,utils/index.ts같은 배럴이 하위 모듈을 한꺼번에 모듈 그래프에 올림- 모듈 최상위의 전역 설정 코드와
external설정 때문에 소비 앱이 실제 의존성 부담을 떠안는 구조
해결 방법
common.ts경량 서브패스 엔트리를 따로 만들어FileDownloadItem과 필요한 유틸만 직접 재export- 빌드 엔트리와
exports,typesVersions를 함께 추가해@vizendjs/vault-view/common경로로 접근 가능하게 정리
성능/운영 포인트
- 배럴 엔트리 대비 참조 청크를 약 3.7MB에서 49KB로 축소
axios는 호스트 앱과 같은 인스턴스를 써야 하므로peerDependencies로 유지
