번들 용량 초과(배포 에러)_Amplify

Amplify란?

“프런트엔드 웹 및 모바일 개발자가 다양한 AWS 서비스를 활용하는 유연성을 바탕으로 AWS에 풀 스택 애플리케이션을 손쉽게 구축, 배송 및 호스팅할 수 있도록 지원하는 완전한 솔루션입니다. “

간단하게 말해서 AWS에서 제공하는 배포 자동화 시스템이라고 할 수 있다.

---

사용 방법

amplify 세팅은 완료된 상태였고 pull을 통해 소스코드만 repository에서 받은 후에 amplify 접속을 시도하면 되었다.

1. amplify cli 설치

curl -sL https://aws-amplify.github.io/amplify-cli/install-win -o install.cmd && install.cmd

2. workspace로 이동 후 amplify pull

3. aws access keys 입력

제공받은 Access key ID와 Secret access key 입력

4. 속성 설정

region, amplify 프로젝트, editor, 언어, 프레임워크 등 속성 설정

❗ Distribution Directory Path는 .next로 변경 ❗

---

❗ 문제 상황

위의 설정대로 amplify로 배포하여 사용하던 중 에러가 발생하여 업데이트 내용이 배포 사이트에 반영되지 않음.

빌드과정에서 에러가 발생하였고, 에러 내용을 검색해 본 결과 번들 용량 초과로 발생한다고 하였다.

프로젝트는 nextjs를 사용하고 있고 기본적으로 코드스플리팅을 지원해 페이지별로 필요한 스크립트만 번들링하게 된다.

하지만 불필요한 스크립트가 같이 번들링되는 일이 있어 따로 최적화할 수 있다면 하는 것이 좋다.

@next/bundle-analyzer를 통해 각 모듈의 번들 사이즈를 측정하고 최적화 해보았다.

• 불필요한 스크립트 줄이기

  • 불필요한 모듈 삭제

  • Code Splitting

---

💡 문제 해결(with. bundle-analyzer)

bundle-analyzer란?

번들 파일이 어떻게 구성되었는지 쉽게 파악하게 해주는 시각화 도구

사용 방법

1. 설치

 $ npm i -D @next/bundle-analyzer

2. next.config.js

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: true,
  openAnalyzer: true
});

3. package.jon에 스크립트 명령어 추가

"analyze": "cross-env ANALYZE=true next build"

4. analyze 실행

아래 그림에서 볼 수 있듯이 React-pdf/render 에서 많은 부분 차지

• React-pdf/render는 뇌파 분석 결과지 pdf를 생성하기 위해 사용

5. 번들 size 확인

bundle-analyzer에서 확인했던 것 처럼 React-pdf/render가 사용되는 페이지의 번들 사이즈가 큰 것을 확인

• React-pdf/render라이브러리를 사용하는 컴포넌트 => ReportLayout

• ReportLayout 컴포넌트를 사용하는 페이지 => report, reportDetail

💡해결 방법 1. 불필요한 모듈 삭제

기존에 설치하고 사용하지 않는 모듈을 모두 삭제하고 import 하고 사용하지 않았던 모듈도 모두 제거해 주었다.

💡해결 방법 2. Code Splitting

• 하나로 합쳐진 번들 파일을 여러 조각으로 분리해 필요할 때만 따로 로드하기 위해 사용

• 페이지 초기 로드 시 필요하지 않은 컴포넌트(ex. 유저와 페이지가 상호 작용한 후에 나타나는 모달 컴포넌트)는 dynamic import를 사용해 코드 스플리팅을 적용

• report페이지에서는 사용자가 선택한 파일에 대한 결과지 pdf가 보여지는 것이므로 pdf생성 컴포넌트(ReportLayout)를 코드 스플리팅 적용

• Code Splitting 방법

  • report페이지에서 ReportLayout를 import할 때 코드 스플리팅 적용

import dynamic from "next/dynamic";
const ReportLayout = dynamic(() => import("./_app/ReportLayout"));

---

💡 문제 해결 확인

Code Splitting 전	Code Splitting 후

Code Splitting 전 build

Code Splitting 후 build

---

📑 참고 자료

AWS Amplify로 next 프로젝트 배포하기(SSR)

aws amplify 기능 정리

[nextjs] bundle-analyzer를 사용한 최적화 일기