lottie-web을 트리쉐이킹 할 수 있을까요?

[giwan-dev]

문제

react-hooks에서 useLottie 훅을 제공합니다. 그런데 useLottie를 사용하지 않더라도 lottie-web이 번들에 포함되고 있습니다.

다음은 content-web의 bundle analyzer 결과입니다.

content-web에선 useLottie를 사용하고 있지도, 심지어 react-hooks를 직접 참조하고 있지도 않습니다. 그런데 200kb 정도의 번들이 모든 페이지에 추가된 상태입니다.

해결 방법

의존성 트리쉐이킹 방법에 대해 좀 더 조사가 필요합니다.

[inbeom]

lottie 꽤나 큰데 들어있군요 ㅠ 왠지 default export 때문에 tree shaking이 안 되는 이슈일거같기도 하네요 ..

[giwan-dev]

바벨에서 빌드하는 과정에서 tree shaking이 하나도 안되고 있네요ㅠㅠ

// review/use-paging 파일의 빌드 결과 중...

var _reactHooks = require("@titicaca/react-hooks");

var _viewUtilities = require("@titicaca/view-utilities");

.......

 var _useFetch = (0, _reactHooks.useFetch)((0, _viewUtilities.generateUrl)({
    path: "/api/reviews/v2".concat(sortingOption ? "/".concat(sortingOption) : ''),

....

1359 을 해결하고 시도해봐야겠네요ㅠㅠ

[inbeom]

ㅠㅠ 그러게요 타겟부터 ESM으로 바꿔야 Tree shaking도 원활하게 잘 될텐데요

[inbeom]

우선 react-hooks에서 lottie 쓰는 부분을 다른 패키지로 분리하고 다음 breaking change로 준비해보면 어떨까요? 번들사이즈 보다 보니 자꾸 얘가 눈에 밟히네요. ㅋㅋㅋ 이거 안 쓰는 프로젝트가 훨씬 많으니, 그리고 react-hooks의 역할이 불분명해서 자꾸 커질 것 같으니 패키지는 나누는 게 맞겠어요.

@drakang4 파트너센터 살펴보시는동안 틈틈이 요거 해주시면 어떨까요!

[kooinsung]

아하. 요게 어제 이욜 맥북을 성나게 했던 원인중 하나겠군요.