번들링 Bundling

: 여러개의 파일을 하나의 파일로 합치는 것.

번들링의 효과

1. 파일의 수를 줄여 HTTP 요청의 수를 줄임 ➡️ 속도 향상
2. 코드의 압축 ➡️ 불필요한 공백, 주석의 삭제 ➡️파일 크기 축소
3. 사용되지 않는 코드 제거 ➡️ 최적화

번들링 도구의 종류

vite의 경우, Rollup을, CRA는 Webpack을 사용해서 번들링을 할 수 있다.

나는 주로 vite를 사용하기 때문에 vite에서 번들링해주는 코드를 알아보았다.

npm run build

터미널에 이렇게 명령어를 적고 실행시켜주면 번들링된 파일이 담긴 폴더가 생성된다.

코드 스플리팅 Code Splitting

번들링의 반대 개념. 기본적으로는 번들링을 진행하고 필요한 부분만 추가적으로 작게 나누어서 스플릿 해주는 것을 말함.

코드 스플리팅의 효과

1. 초기 로딩 속도의 개선
   ➡️  코드 번들링을 통해 하나의 파일로 묶이면 HTTP 요청의 수는 줄지만, 파일의 크기가 커질수록 초기 로딩 속도가 저하됨. 따라서 빠른 초기 로딩이 필요한 파일에 한해 코드 스플리팅 진행

2. 불필요한 코드 로드의 방지
   ➡️  코드를 쪼개두었기 때문에, 필요한 부분에 한해서 그때 끄때 보내줄 수가 있게 됨.

3. 데이터 비용 절감
   ➡️  무조건 전체를 다보내는 것이 아니라 쪼개서 필요한 부분만 보내니까 데이터가 적게 사용됨.

React의 lazy나 Suspense도 대표적인 코드 스플리팅 방법!

➡️ BUT! lazy나 Suspense는 리액트 내의 컴포넌트 코드만 스플리팅 가능

리액트 내부의 컴포넌트 코드 이외에 다른 코드를 스플리팅 하고 싶다면?

vite.config.js 로 들어가서

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  //build 부분 부터 복사 붙여넣기
  build: {
    outDir: "docs",
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          if (id.indexOf("node_modules") !== -1) {
            const module = id.split("node_modules/").pop().split("/")[0];
            return `vendor-${module}`;
          }
        },
      },
    },
  },
});

해당 코드를 사용해주면 된다.

rollupOptions에서 수동으로 코드 덩어리manualChunks에 대한 설정을 지정해주는 것이다.