목록 보기
Loopin의 vault 경량 엔트리 적용기
프론트엔드

Loopin의 vault 경량 엔트리 적용기

넥스트리
넥스트리
2026년 9월 4일

두줄요약

배럴 import 때문에 필요한 컴포넌트 하나가 패키지 전체를 끌고 오는 문제를 해결했습니다. 경량 서브패스 엔트리를 추가해 번들을 크게 줄이고 재사용성을 유지했습니다.

문제 상황

  • Loopin 채팅에서 vault의 FileDownloadItem 하나를 가져오려 했지만, 배럴 import 때문에 패키지 전체가 따라오는 문제 발생
  • 결과적으로 pnpm-lock.yaml 증가, 불필요한 PDF 뷰어 워커와 여러 무거운 의존성이 번들에 포함

원인 분석

  • src/index.tscomponents/index.ts, utils/index.ts 같은 배럴이 하위 모듈을 한꺼번에 모듈 그래프에 올림
  • 모듈 최상위의 전역 설정 코드와 external 설정 때문에 소비 앱이 실제 의존성 부담을 떠안는 구조

해결 방법

  • common.ts 경량 서브패스 엔트리를 따로 만들어 FileDownloadItem과 필요한 유틸만 직접 재export
  • 빌드 엔트리와 exports, typesVersions를 함께 추가해 @vizendjs/vault-view/common 경로로 접근 가능하게 정리

성능/운영 포인트

  • 배럴 엔트리 대비 참조 청크를 약 3.7MB에서 49KB로 축소
  • axios는 호스트 앱과 같은 인스턴스를 써야 하므로 peerDependencies로 유지

다음 읽기

#Tree Shaking 주제를 다룬 다른 회사 글

[디자인 시스템 어떻게 만들었어요?(3)] Tree Shaking과 구형 브라우저 대응

Next.js 환경에서 디자인 시스템 라이브러리의 번들 최적화와 구형 브라우저 대응 방법을 정리했습니다. 모듈 구조 유지, transpilePackages, 폴리필 전략을 통해 서비스 단의 호환성과 성능을 함께 개선했습니다.

요기요
요기요
프론트엔드

댓글 0

댓글을 작성하려면 로그인이 필요합니다.

댓글을 불러오는 중...