[Typescript] Zod에서 Superstruct로의 전환기

서론이번 포스팅에선, 필자가 CHINGOO.BE 프로젝트(GitHub repo.)를 진행하면서 여러가지 최적화들을 시도하다가 번들 사이즈 관련 최적화의 일환으로 기존 프로젝트에서 사용중이던 zod 라이브러리를 superstruct로 전환하게 된 과정을 소개한다.Zod를 다른 라이브러리로 전환하려는 이유Zod에서 다른 라이브러리로의 전환을 통해 달성하려던 목표는 "번들 사이즈" 절감이었다.CHINGOO.BE는 Next.js 기반의 프로젝트라서 next-bundle-analyzer를 돌려보았었다. 여러가지 눈에 띄는 큼직큼직한 패키지들이 보인다. react-dom에나 next관련 패키지는 대체 가능한 패키지가 없으니 건너뛰고, 그 다음으로 가장 눈에 띄는 패키지는 위 이미지에서 빨간 박스가 쳐진 Zod 패키..

• format_list_bulleted Typescript
• · 2024. 2. 21.
• textsms

[Typescript] optimizePackageImports 옵션으로 Next.js 번들 사이즈 줄이기 (modularizeImports 대체재)

서론 이번 포스팅에선 Next.js에서 번들 사이즈 최적화를 위해 제공하는 optimizePackageImports 옵션을 소개해보려고 한다. 점점 날이 갈수록 뚱뚱해지는 우리의 Next.js 프로젝트를 다이어트 시켜보자. optimizePackageImports가 뭔데? optimizePackageImports는 Next.js 13.5 버전에 출시된 next.config.js의 옵션이다. 이 옵션을 활성화하면, 프로젝트에서 import하고 있는 패키지가 번들링될 때의 용량을 절감 시켜준다. 그로인해 우리 번들링 결과물에 마법같은 용량 절감 결과를 보여준다. 하지만 절감 원리는 매우 단순하다. Barrel Index로 component, hook등을 제공하는 패키지들은 트리쉐이킹이 안되는 경우가 자주 발..

• format_list_bulleted Typescript
• · 2024. 2. 8.
• textsms