감자마켓 성능개선_ 번들파일 코드 스플리팅

Code splitting?

코드분할은 번들한 여러 코드 혹은 컴포넌트를 분리하는 것입니다. 이렇게하면 필요에 따라 특정한 컴포넌트만 로딩하거나, 병렬로 로딩할 수 있습니다.

빌드 하는 과정에서 코드 스플리팅을 하지 않으면 엔트리 파일의 크기 때문에 당연하게도 첫 페이지의 렌더링 속도가 느릴 수 밖에 없다..

어떤 파일이 문제인지 json 파일을 살펴보자.

cat package.json | jq '.'

package.json 을 읽어와 json데이터를 정돈하여 콘솔에 출력하는 명령어 이다.

보통 SPA으로 구성되어 있는 경우에 첫 페이지의 렌딩 속도가 느린 이유가 모든 페이지에서 사용되는 javascript 코드가 하나의 파일로 묶여져 있기 때문이다.

vite는 이러한 렌딩 파일의 용량이 최대 500 까지라고 경고해주고 있고 동적 호출 방식을 사용해서 애플리케이션의 코드 스플리트를 하라고 힌트를 주고 있다.

빌드 할때 build.rollupOptions.manualChuks를 사용하라고 되어있다.

build.rollupOptions.manualChuks?

build.rollupOptions.manualChuks는 빌드 프로세스 중에 애플리케이션의 종속성을 개별 청크로 묶는 방법을 수동으로 정의 할 수 있는 vite 구성 개체 내의 속성이다.

➡️ 비슷한 종속성 파일을 사용자가 묶어 설정 할 수 있다. 따로
설치할 필요 없이 vite에 기본적으로 포함 되어있는 옵션이다.

📌 manualChuks로 관심사 별로 묶은 빌드 파일들

 build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ["react", "react-dom"],
          reactRouter: ["react-router", "react-router-dom"],
          reactDaumPost: ["react-daum-postcode"],
          fbApp: ["firebase/compat/app"],
          fbAuth: ["firebase/compat/auth"],
          fbStore: ["firebase/compat/firestore"],
          fbDb: ["firebase/compat/database"],
          dbStorage: ["firebase/compat/storage"],
          recoil: ["recoil", "recoil-persist"],
          styled: ["styled-components", "styled-reset", "styled-normalize"],
          swiper: ["swiper"],
          compression: ["browser-image-compression"],
        },
      },
    },
  },