CJS
-
당신의 TreeShaking은 정말로 안녕하신가요?개발 블로깅/오늘의 TIL 2023. 10. 24. 15:48
프로젝트를 진행하면서 어느 순간 번들 사이즈가 대폭 커지면서 의아함을 감출 수가 없었다. 지금까지 진행한 프로젝트에 비해 약 2배 가까이 되는 번들 사이즈를 보고 내가 어딘가를 놓쳤다는 의구심이 들 수 밖에 없었다. 번들 사이즈의 원인으로 의심되는 부분은 아래 4개였다. Dynamic Import를 놓쳤다. 사이즈 큰 모듈을 Lazy하게 가져오도록 하지 않았다. TreeShaking이 제대로 되지 않았다. Dynamic Import 문제였는지 체크 가장 상단의 컴포넌트를 주석 처리를 하고 빌드를 해보니 First Load Bundle Size가 약 10kb 정도 줄어들긴 했지만, 여전히 300kb나 되는 굉장히 큰 것을 보고 이것이 큰 원인은 아니라는 것을 깨달았다. 사이즈 큰 모듈 Lazy하게 가져오도..
-
[Yarn berry] pnp가 Cypress환경에서 제대로 동작하지 않던 이슈 해결개발 블로깅/기타 개념 2022. 9. 25. 14:19
디펜던시 문제를 잘 해결하고 build와 run까지 문제없이 잘 돼서 이제 끝났나 싶었더니, 테스트 CI에서 뻥뻥 터지는 것을 발견했다. Cypress 환경에서 pnp를 사용하는 것에 대해 겪은 두가지 문제가 있었는데, 이에 대한 원인과 해결한 내용을 정리해 보려고 한다. cypress.config.ts 파일을 읽는데 .ts 확장자를 읽지 못하는 문제. 우선 pnp는 CommonJS를 Base로 동작하도록 되어 있고, 추가로 ESM 모듈 지원이 필요하다고 판단되면 추가 세팅이 되는 방식이다. 그래서 pnp install을 하면 루트 경로에 pnp.cjs(commonJS) 파일을 생기는데, 프로젝트 자체가 ESM 모듈 지원이 필요하다고 판단되면 pnp.loader.mjs 파일을 추가로 생성하도록 되어있다...