반으로 갈라져서 죽어버려 bundle

프론트엔드 최적화에는 여러가지 방법이 있다.

폰트 최적화 이미지 최적화 등등

 

오늘은 그중에서 next js에서 lazy loading을 통한 로딩 속도 최적화에 대해서 알아보자

source 탭을 보게 되면 길게 다운로드 되고 있는 chunk file이 하나 있다.

이 파일은 처음 페이지가 로딩될 때 필요한 패키지들을 다운로드 하는 것인데

처음 페이지가 로딩이 이렇게 길어지게 되면 next js의 장점을 버려버리는 것과 같다.

 

최적화를 해주자

npm install @next/bundle-analyzer

yarn add @next/bundle-analyzer

우선 webpack을 분석하기 위한 analyzer를 설치하고

  "scripts": {
    "webpack-build": "ANALYZE=true next build",
	...
  },

cli를 실행 해보면

내가 설치했던 패키지들이 잘 보이는 것을 확인할 수 있다.

 

분석을 해보자

lottie는

나의 페이지의 맨 처음 애니메이션을 보여주는 함수 이다.

즉 저 분홍색 구간이 제일 처음 라이브러리들을 가져오는 곳이다.

 

그렇다면 이상한 점이 하나 있다.

quill.js분명 외부 라이브러리인데 어째서 다른 곳에서 불러와 지는 것일까?

 

그렇게 해주기 위한 것이 dynamic import이다.

https://nextjs.org/docs/advanced-features/dynamic-import

 

dynamic은 페이지를 렌더링하는 데 필요한 JavaScript의 양을 줄여 초기 로딩 성능을 향상시키는 데 도움이 됩니다.

 

const EditorComponent = dynamic(() => import("react-quill"), {
  ssr: false,
});

const Post = () => {}

 

이렇게 해주면 글쓰는 페이지까지 react-quill을 import하지 않고 글쓰기 페이지에 들어갈때 react-quill 패키지를 import해온다.