[Next.js] Front 서버 배포시 First Load JS 용량 줄이기

Front 서버 배포시 First Load JS 용량 줄이기

클론 코딩을 하면서 ec2 프리티어를 사용하여 프론트 서버를 배포했다.

 

그런데 오류와 버그를 수정해나가면서 로컬에서 변경된 코드 부분을 git에 업로드했다.

그리고 git을 다시 ec2에 git pull한 다음 npm run build를 하는데 어느 순간부터 build만 하면 먹통이 되었다.

 

로컬 :    git commit -am " ~comit msg"

             git push origin master에서 git에 등록한 후

 

ubuntu 접속: sudo git pull

                     sudo npm run build

 

build 도중 먹통 상태

 

ec2 프론트 서버가 터진 것이었고 ec2 서버를 재부팅을 해야만 다시 작동이 되었다.

처음에는 뭔지 몰라 pm2 kill도 해보고 뭐 다시 npm i 하고 뭐 그냥 다 해봤지만 안됐다. 

 

원인은 서버 메모리가 부족한 것이었다. 프리티어가 아닌 실무에서도 한 컴포넌트에 2mb가 최적화에 좋다고 하는데 프리티어인 나는 벌써 1메가에 임박하는 메모리를 갖고 있었다.

build 화면시 FIrst Load JS 메모리 큼...

 

서버의 크기가 프리티어 용량보다 크면 방법은 3가지이다.

1. 유료 인스턴스로 서버 CPU 메모리를 확장해나가거나
2. 로컬에서 빌드를하고 파일을 서버로 올려서 실행하거나
3. 서버 메모리를 최적화시켜 프리티어 용량에 맞추는 방식을 사용하거나

 

그런데 난 1,2 방법은 번거롭고 과금이 되기 떄문에 쓰지않고 3번을 선택했다. build시 메모리를 줄이는 방법이 없을까하고 구글링을 해봤고 방법은 있었다.

해결 방법 1. 쓸데없는 종속성을 지우기

첫 번째 쓸데없는 종속성을 지우는 것이다. 귀찮거나 혹은 까먹어서 안지우고 넘어가는 경우가 있는데 해당 종속성의 크기에 따라 꽤나 큰 용량을 차지할 수 도 있다.

종속성 삭제 후 build화면

 

위의 build를 비교해보면 알겠지만 각 컴포넌트 당 무려 300~500kb의 용량이 줄어들었다.

 

나는 sever와 연결을 하지 않았을 때 front단에서만 더미 데이터 테스트를 하기 위해 shortid, faker 라이브러리를 사용했었다.

무한 스크롤링 테스트 때문에 데이터를 많이 해놔서 그런지 데이터를 많이 잡아먹고 있었나보다.

 

해결 방법 2. 컴포넌트와 종속성에 Lazy/Dynamic 로딩

그리도 두 번째로는 컴포넌트와 종속성에 Lazy/Dynamic 로딩을 하는 것이다.

 

SSR을 사용하면서 작동하지 않는 React.Lazy (지연로딩)기능을  'next/dynamic'을 통해 같은 방식의 동작을 구현할 수 있다.

그러면 모듈을 빌드 타임이 아닌 런타임에 불러온다. 이를 통해 번들 파일을 분리하고 성능 퍼포먼스를 향상 시켜주게 된다.

 

 

 

 

 

++++

Webpack 은 Code 를 Build 하는 시점에 import 된 module 중 사용하지 않는 코드를 제거할 수 있다.

Tree Shaking

트리 쉐이킹으로 자바스크립트 페이로드 줄이기