[Next]이미지 최적화.. 'sharp' package is strongly recommended

제목 그대로 Next/image를 사용해서 이미지 최적화를 하는 경우 sharp를 package.json에 추가해야 한다.

sharp가 없으면 배포환경 터미널에 이런 로그가 계속찍히고 있을지 모른다.

연휴가 끝난 바로 다음날 사용자가 몰리면서 cpu사용률이 100%에 달해서

인스턴스가 죽었다 살아나기를 반복.. 

원인은 이미지 최적화에 과부하가 걸린것이다.

next서버가 원격 이미지를 가져와서 해당 buffer를 가지고 이미지 최적화를 해서

프런트엔드로 서빙해 주는데 이 과정에서 두 가지 패키지를 사용한다.

sharp와 squoosh이다.

 

두 개나 쓴다니? 우선적으로 sharp를 쓰고 없으면 squoosh를 쓴다.

next/image의 소스코드를 보면

production 배포일 때, showSharpMissingWarning이라는 변수가 true가 된다.

변수명을 보니 sharp가 없으면 경고를 보내고 싶나 보다.

 

imageOptimizer 함수를 보면 

// next/dist/server/image-optomizer.js

(위 경로를 참고하세요)

next/image를 사용한 개발자가 입력한 옵션값을 가지고 와서 buffer, type, cacheTime 등을 변수에 저장한다.

그다음 type이 svg인지, animate인지? animate는 gif를 말하는 건가... 

최적화할 수 없는 이미지소스를 들고 오면 그냥 리턴 시켜버린다.

그러고 나서 최적화를 하는데, sharp가 있으면 sharp 패키지를 이용해서 최적화를 하고

sharp가 없으면 else문에 걸려서 'sharp' package is strongly recommended 관련 warning을 출력하고

squoosh로 최적화를 한다.

이런 로직을 봤을 때 next는 production 환경에서 sharp를 꼭 쓰고 싶다는 것을 알 수 있다.

 

https://github.com/vercel/next.js/discussions/27073

RFC: Use Sharp for image optimization if installed · Discussion #27073 · vercel/next.js

https://github.com/vercel/next.js/issues/23637

next image optimization significantly slower in next after 10.0.7 · Issue #23637 · vercel/next.js

위에 링크 걸린 이슈들을 보면 2021년에 next 11 버전 업그레이드가 되면서 squoosh를 적용했고

수많은 개발자들이 너무 느리고 리소스를 많이 사용한다며 불만을 표시하고 있다.

그래서 10 버전으로 롤백한 사례가 많다.

이런 불만을 수용하여 12 버전에서는 다시 sharp가 도입되었으며, sharp가 production상황에 없을 때는 로그를 찍어준다.

(개발환경에서도 경고를 보여주면 더 좋지 않을까..)

 

sharp 패키지를 추가해서 production에 배포한 뒤로는 cpu사용률이 급격히 감소하였으며

더 이상 경고도 보이지 않았다.

 

sharp와 squoosh가 왜 이렇게 큰 차이를 보이는지는 아직 잘 모르지만..

대체 왜 11 버전에서 squoosh를 전면도입했을까...?