피드로 돌아가기
Dev.toFrontend
원문 읽기
Subpath Export 제거를 통한 패키지 관리 복잡도 해결 및 번들 최적화
Design to Code #8: The Cosmetics of Modularity
AI 요약
Context
문서상의 import 경로와 실제 배포된 npm 패키지의 구조가 불일치하여 Module Not Found 에러 발생. 42개 컴포넌트에 대해 개별 Subpath를 관리하려는 시도가 과도한 package.json 설정 유지보수 비용을 초래함.
Technical Solution
- 단일 Root Entry Point 기반의 아키텍처로 전환하여 package.json 관리 포인트 최소화
- tsup의 splitting: true 옵션을 활용해 Named Export 수준의 Tree-shaking 보장
- 불필요한 Subpath Exports를 제거하여 Cosmetic Modularity가 아닌 실제 동작하는 구조 설계
- 의존성 규모가 큰 Chart 컴포넌트에 한해 예외적으로 Subpath Export를 허용하여 Core 번들 크기 방어
- npm pack과 프로그램적 import 테스트를 결합한 Verification Script 도입으로 문서와 패키지 간 동기화 검증
실천 포인트
- 라이브러리 설계 시 시각적 모듈성보다 Tree-shaking 효율성과 유지보수 비용을 우선 검토 - 컴포넌트 수가 50개 미만이거나 Core 번들이 100KB 이하인 경우 단일 진입점 설계 권장 - 거대 외부 의존성을 가진 특정 모듈은 별도 Subpath로 분리하여 선택적 설치 유도 - 문서의 코드 스니펫과 실제 빌드 아티팩트의 일치 여부를 검증하는 자동화 스크립트 구축