Next.js 번들 사이즈 최적화 (패키지)
지금까지 마트장보고 앱은 대부분 단방향으로 정보를 제공했고, 유저는 정보를 소비만 했습니다.
새로운 변화를 주고자 사장님이 직접 작성하는 생생마트통(선착순, 공동구매)을 개발하게 되었고, 사장님 앱도 같이 출시되었습니다.
이러한 과정속에 여러 패키지를 설치하게 되는데, 그 중에 비교적 큰 사이즈의 패키지를 최적화한 내용을 남겨보겠습니다.
bundle analyzer
https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer
설치 방법은 자료가 많기에 따로 정리하지는 않았습니다!
heic2any
사용이유
heic 이미지를 jpeg로 변환하기 위한 도구로 사용했는데, 사이즈가 1.15MB로 가장 큰 패키지로 확인됩니다.
처음 패키지를 선정할 때는 다운로드 수가 비교적 많고, 사용 방법도 심플하고 동작에 문제가 없었습니다.
하지만, 지금 돌아보면 패키지 사이즈가 2.43MB로 무거운 패키지였습니다.
HEIC(High Efficiency Image Container): iOS 11 부터 지원되는 이미지 형식
최적화
처음에는 대체할 패키지를 찾아봤는데, 찾지 못했습니다.
dynamic-import를 통해 초기 로딩에서 불러오는 JS 사이즈를 줄이고, heic를 변환 시 import 하도록 개선했습니다.
모든 페이지에서 First Load JS: 300KB 가 줄어 들었습니다.. 🤦
crypto-browserify
사용이유
유저의 개인정보를 암호화해서 전달 받는데, 복호화하기 위해서 crypto를 사용했다.
서버와 암복호화 방식을 통일하기 위해 동일한 함수를 사용했다.
515KB 정도 사이즈를 차지하는 2번째로 큰 패키지다.
최적화
관련 자료를 찾다보니 node.js에서 사용하는 module을 가져다 사용해서 그렇다고 한다.
처음에는 crypto-js로 변경하려고 했는데, 서버와 호환이 되지 않았다.. 에러도 발생했다.
한참 삽질 했는데, 더 이상 시간을 투자할 수 없는 상황이였다.
다음날 crypto -> crypto-js 가 아니라 crypto -> browserify-aes로 갈아치웠다.
browserify-aes는 crypto-browserify에서 AES만 분리되어 있는 패키지다. 참고
대략 100KB 정도 사이즈가 줄어들었다. 👍
그리고 crypto-browserify 영역이 사라졌다!
의견
사실 최적화가 필요한 부분도 많고, 공부해야 할 부분도 많지만, 한 걸음 내디뎠다는 점에서 스스로 칭찬하고 싶다.
하나씩 하나씩 개선하다 보면 좋은 프로덕션과 개인의 성장도 함께 있을 것이라고 믿는다 👏
참고
