VITE

어떻게? 왜 작동하는가? 자 이전글에서 모노레포에서 tsconfigPath의 마법 같은 경로문제 해결 기능을 보았다. 하지만, 개발자라면 마법과 같은 일은 없으리라는 것을 알고 있을 것이다. 결국 왜? 를 알아야 내 것이 되는 것이다. 어떻게 tsconfigPath가 경로문제를 해결했는지 확인해보자. 바쁜 분은 결론만 보아도 이해에 도움이 될 수 있을 것 같다. viteFinal .storybook/main.ts의 viteFinal은 vite-builder를 통해 storybook을 구성하는 경우에 사용되는 옵션이다. 추가적인 플러그인을 적용시키는게 가능하다. 즉 아래 코드는 기존 storybook vite의 config를 가져와서 tsconfigPath plugin을 적용시킨 후에 merge하고, 이를..

문제점 네이버 부스트캠프에서 진행하고 있는 AlgoITNi프로젝트에서 아래와 같은 문제가 발생했다. 빌드하는 과정에서 이러한 경고 메시지가 발생한 것이다. 특정 청크가 500KB보다 크다는 것이 문제이다. 위 사진을 보면 번들사이즈가 1285kb이고, 사용자가 실제로 받는 번들사이즈인 gzip사이즈가 425.33kb이라 초기 렌더링이 느려질 수 있다는 문제가 있다. 청크 사이즈 줄이기 청크 구조 분석하기 원인을 알기위해서 vite-bundle-visualizer를 사용해서 청크의 시각적인 분석을 해보았다. highlight.js가 번들의 절반을 차지하고있었다. highlight.js는 에디터에서 코드하이라이팅에 사용되는 라이브러리인데, 여러가지 언어를 모두 지원하기때문에 이렇게 라이브러리 사이즈가 커지는..