Code Splitting 썸네일형 리스트형 번들링 최적화를 통해 import cost 줄이기(2) 프로젝트: loplat UI키워드: bundling optimization, rollup, tree shaking, import cost, webpack, side effects, postpublish상황이전 포스트 번들링 최적화를 통해 import cost 줄이기(1)에서 'esm format build'와 'code splitting' 단계를 거쳤지만 여전히 tree shaking이 제대로 되지 않는다.해결 과정rollup 공식 사이트에서 tree shaking 이 작동하지 않는 상황에 대한 문서를 확인했다.(https://rollupjs.org/guide/en/#tree-shaking-doesnt-seem-to-be-working)Sometimes, you'll end up with code in .. 더보기 번들링 최적화를 통해 import cost 줄이기(1) 프로젝트: loplat UI키워드: bundling optimization, rollup, tree shaking, code splitting, commonJS, es modules, import cost상황팀원분이 완성해둔 loplat ui 라이브러리를 실제 프로젝트에서 사용하고자한다.아래와 같이 사용하고 싶은 컴포넌트를 import 한다. import { Button } from 'loplat-ui';import { black400 } from 'loplat-ui';사용할 컴포넌트에 해당하는 코드만 불러오는 것이 아니라, 번들링 된 코드를 모두 불러와 과도한 import cost가 든다.black400이라는 palette const를 불러오는 것이므로 1kB도 되지않는 작은 크기여야만 한다.해결과정.. 더보기 이전 1 다음
