본문 바로가기

Web/vue

[Nuxt3] 메모리 누수 (feat. nuxt3 버전 이슈)

사건의 발단

pc웹과 특히 모바일웹에서 페이지 이동을 반복적하다보면 메모리가 쌓이다가 결국 웹이 더이상 작동되지않고 콘솔에 스크립트에러를 뱉으며 멈추는 현상을 발견하기 되었다. 

 

 

아래 메모리 누수 있을법한 자바스크립트는 수정은 해보았지만 왜 계속 메모리가 쌓이는건지 알수없었던 상황에서 우리와 비슷한 상황의 글을 발견했다.

https://github.com/nuxt/nuxt/discussions/23087

 

How to debug a nuxt-related HUGE memory leak? · nuxt nuxt · Discussion #23087

Vue 3.6 / 3.7 production build. Every request with full SSR create a 1.2MB memory leak in server. I tried to take a snapshot ( allocation and heap) and saw the routes stored in the memory again and...

github.com

 

3.6버전대 route 관련 메모리 누수가 있다는 글 확인후 3.10.1 최신 버전으로 업데이트 진행후 테스트 해본 결과 페이지 이동시에 서비스가 멈춰버리는 현상은 해결되었다.

nuxt3 버전 변경전
nuxt3 버전 변경후

읽어보면 좋은 내용

https://ui.toast.com/posts/ko_20210611

 

당신이 모르는 자바스크립트의 메모리 누수의 비밀

크롬 개발자도구로 하는 디버깅과 해결책을 찾아서!

ui.toast.com