기존
chunk사이즈가 크다고 warning을 띄움
보통 이 문제를 해결하려면 그냥 warning메시지를 띄우는 기준을 올리면 되긴하는데 근본적으로 문제를 해결하고 싶어서 다른 방식을 찾아봤다.
번들 사이즈 경량화
vite에서 제공하는 rollup-plugin-visualizer를 사용해서 프로젝트에서 차지하는 파일의 용량 및 의존성있는 라이브러리들의 용량을 계산하여 프로젝트 총용량이 어떻게 구성되어 있는지 확인 할 수 있다.
node_modules보다도 용량을 많이 차지하는 assets폴더 하위의 vendor-WiloPUQf.js라는 놈이 보인다.
문제점
폰트 파일
지금 사용하고 있는 웹폰트 확장자는 OTF이다.
EOT,OTF는 글꼴이 압축되지 않아 결과적으로 파일 크기가 크다.(로딩속도 문제발생)
이에비해 WOFF, WOFF2를 사용하면 글꼴이 압축되어 있어 로드도 빠르고 용량이 적다는 장점이 있다.
따라서, 에스코어 드림 폰트 파일들 중 WOFF확장자를 가진 파일을 찾아봤다.
근데 없다. 그래서 혹시나해서 변환기를 찾아봤는데 있어서 적용 후 woff2로 바꾸고 적용했다.
용량이 거의 3분의1?로 줄어든 모습이다.
gif 파일
현재 에러 페이지의 움짤 파일 크기가 매우 크다.
gif → mp4로 변경하면 대폭 줄어듬
Chunk 나누기
이 파일은 뭔데 1700KB나 차지하는 걸까 해서 봤는데 리액트같은 SPA 특성상 빌드시 빌드 시 하나의 JS파일로 번들링되는데 이 파일이 그 파일이다. 그래서 당연히 크기가 큰 것이다.
- manualChunk로 청크 분리
근데 이렇게 해도 600KB나 차지한다. 아래 warning 메시지를 보면 code splitter하라고 한다.
code splitter(lazy함수를 이용해 동적 import)
번들 파일의 코드를 분할하여, 모든 코드를 한 번에 불러오지 않고 사용자가 필요로 할 때에 필요한 코드만 불러오는 개념
컴포넌트만 내보내라는 오류가 뜨기도 하고 chunk사이즈가 변하지 않아서 하지 않음
- https://stackoverflow.com/questions/77365777/how-to-avoid-eslint-warning-in-react-fast-refresh-only-works-when-a-file-only-e
- 해결했나? 싶은데 chunk size가 전혀 줄어들지 않았음 ㅠ
- notice를 하는 제한을 1600KB로 올려서 해결