들어가기에 앞서...
지난 글에서도 언급한 바와 같이 프로젝트 내에 구성하면서 겪었던 rollup을 정리하는 시간을 가지려고 하였습니다. 하지만 최근 캘린더 라이브러리를 배포한 이 후 생기게 된 이슈들을 처리하면서 겪었던 부분을 먼저 정리해볼까 합니다.
문제 상황
현재 저희 프로젝트는 멀티 레포 환경으로 구성되어 있고, 이 프로젝트들은 공통으로 사용하는 core, ui 프로젝트를 참조하게 됩니다. 그런데 프로젝트 간에 라이브러리 버전 충돌 문제가 발생하면서 에러가 발생하게 되었고, 이 문제를 해결하기 위해 각 프로젝트에서 라이브러리를 배포할 때 core, ui를 peerDependencies에서 제외하고 배포하게 되었습니다.
처음 몇 버전을 배포하면서 해당 이슈는 문제없이 진행되고 있었습니다.
하지만 이번에 몇가지 컴포넌트를 배포하면서 예상하지 못한 문제가 발생하였습니다.
// 이해를 돕기 위한 예시입니다.
// src/index.ts
export * from './web/components/externals';
export * from './mobile/components/externals';위의 간략한 코드와 같이 index.ts 파일에는 웹/모바일에서 내보내는 종속성이 존재하지 않는 순수 컴포넌트 함수만 export 되어 있습니다.
문제 상황
하지만 rollup을 통해 빌드된 파일 내부에는 core를 사용하는 api 함수 및 repo, model, store 등등... 다른 종속성 있는 코드들도 함께 빌드가 되어 있었습니다.
core, mobx, axios, repo 등이 dist/index.js 파일에 포함된 모습
이미 지난번에 rollup.config.js를 구성하면서 라이브러리 용량에 대해서 최적화를 하였지만, 지금 이와 같은 불필요한 파일들이 들어가 있을때의 용량을 확인해보았습니다.
원인 분석
- rollup에서 참조되는 폴더를 제외시키기
처음에는 어떤 부분에서 해당 부분을 참조하고 있는지를 파악하는데 신경을 쓰기보단, 저렇게 같이 빌드되고 있는 폴더들을 제외하면 어떨까라는 생각으로 접근하였습니다.
따라서 rollup.config.js 내의 plugins 부분에 exclude folder를 하기 위해서 임의의 플러그인을 설정을 하면서 resolvedId(id) 의 id 값을 콘솔로 찍어보게 되었습니다.
첫 entry 부터 참조하는 파일들을 따라 찾아가는 모습을 발견할 수 있었습니다.
문제 부분
배포하고 있는 컴포넌트가 사용하고 있는 커스텀 훅 중에 useDidMountEffect 라는 훅을 사용하지만
import { useDidMountEffect } '@common/hooks';위와 같은 형태로 가져다 쓰게 되면서, index.ts 로 참조하게 되고 그에 따라 useWebSocket 함수도 로드 되면서 앞선 상황과 같이 core, mobx, axios, repo 등이 필요하게 되면서 함께 빌드가 되었던 것입니다.
문제 해결
import { useDidMountEffect } '@common/hooks/useDidMountEffect';위와 같이 참조할 값만 import하여서 불필요한 참조가 일어나지 않도록 비교적(?) 간단하게 해결하였습니다.
빌드 결과
빌드 과정 중에 찍어본 콘솔, 종속성 있는 코드들을 참조하지 않게 되었습니다.
빌드 결과물 내에서도 참조된 코드들이 제거 되었습니다.
앞서 보았던 dist/index.js 에 비해 192kb -> 89kb 로 절반 이상 감소하게 되었습니다.
결과
기존에 rollup.config.js를 구성하게 될 때 프로젝트 내에서 어떤 프로젝트를 종속성으로 들고 있어야 하고, 어떠한 것들은 라이브러리를 배포할 때 제외시켜야겠다를 주로 생각해왔던 것 같습니다.
하지만 이번에 이 과정을 겪어가면서 단순히 export 할 컴포넌트만 명시한다고, 해당 컴포넌트와 관련된 코드들만 export 될 거라는 안일한 생각을 바꿔볼 수 있는 경험이었습니다.
하나하나 rollup 과정을 파헤쳐나가면서 종속성을 제거하는 귀중한 경험이었습니다.
감사합니다.
