본문 바로가기

ROLLUP

JS library에서 cjs, esm format 모두 지원하기 프로젝트: loplat UI키워드: CommonJS, ES Modules, loplat UI, package.json, npm, babel, jest, rollup상황loplat UI는 tree shaking을 지원하기 위해 cjs format을 버리고 esm format의 빌드 결과를 채택했었다.(번들링 최적화를 통해 import cost 줄이기(1))때문에 es6 문법을 기본적으로 이해하지 못하는 환경(Jest test, Next/SSR build)에서는 라이브러리를 transpile해야하는 번거로움이 있다.(Next.js는 'next-transpile-modules' https://www.npmjs.com/package/next-transpile-modules를 사용해야하고, jest도 추가 opt.. 더보기
번들링 최적화를 통해 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도 되지않는 작은 크기여야만 한다.해결과정.. 더보기

티스토리툴바