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

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