Vite 프로젝트 번들링 최적화 (manualChunks)

이전에도 동일한 방법으로 번들링 최적화를 했던 경험이 있습니다. 이번 프로젝트에서도 마찬가지로 번들링 최적화를 위해 아래 작업을 거쳤습니다.

https://velog.io/@kangactor123/Vite-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%B2%88%EB%93%A4%EB%A7%81-%EC%B5%9C%EC%A0%81%ED%99%94

 

Vite 프로젝트는 SPA 아키텍쳐이기 때문에 번들링 최적화를 해줘야 합니다. Vite는 개발 서버 구동을 위해 ESbuild와 네이티브 ESM을 사용하고 있고, 프로덕션 번들링을 위해 rollup이라는 번들러를 사용하고 있습니다.

 

RollUp의 번들링 방식은 웹팩의 번들링 방식과 다릅니다. 초기에 소스 코드를 동일한 수준으로 (호이스팅이나 실행 컨텍스트 관점에서) 올리고 해당 코드를 한번에 번들링을 합니다.

가장 큰 특징은 번들링 결과물을 ES6모듈 형식으로 내보낸다는 것 입니다. 그래서 번들링 결과물의 사이즈가 더 가볍습니다. 이러한 특징으로 라이브러리 제작을 위한 번들러로 롤업을 채택하는 편 입니다.

 

Webpack은 번들링 최적화를 위해 이것 저것 설정을 해줘야 하지만, Vite의 빌드는 거의 Zero Configuration으로 최적화가 잘 되어있습니다.

개발 레벨에서 코드 스플리팅을 잘 진행해줬다면 RollUp의 manualChunk 옵션 하나로 번들링 최적화를 할 수 있습니다.

 

 

위 스크린샷을 살펴보면 코드 스플리팅으로 인해 번들링 후 많은 chunk파일이 생성된 것을 확인할 수 있습니다. 하지만 index 뭉텅이 파일이 하나 존재하는데요, 이 파일에는 코드 스플리팅이 되지 않은 코드들과 node_modules의 공통 모듈과 코드들이 포함되어 있습니다.

 

컴포넌트, 페이지 에서 사용하는 공통 모듈들과 코드들만 분리해 index chunk의 용량이 줄어들게 됩니다. index chunk의 용량이 줄어들게 된다면 결과적으로 사용자에게 더 빠른 초기 랜더링을 제공할 수 있습니다.

// vite.config.ts
...
  build: {
      rollupOptions: {
         output: {
            manualChunks: (id) => {
               if (id.includes('node_modules')) {
                  const module = id.split('node_modules/').pop().split('/')[0];
                  return `vendor-${module}`;
               }
            },
         },
      },
   },
}

 

manualChunks 옵션에 익명 함수를 넣어줍니다. 파라미터로는 모듈의 id를 받을 수 있습니다. 만약 id에 node_modules가 포함된 라이브러리 모듈이라면 vendor라는 prefix를 붙여 해당 모듈 명칭만 붙여서 chunk로 분리해주겠습니다.

 

 

번들링 최적화 이후 빌드 결과물 입니다. index chunk파일의 용량이 상당히 줄어든 것을 확인할 수 있습니다. ag-grid-community 라이브러리가 생각보다 크다는 것도 확인이 됩니다.

 

추후엔 ag-grid 라이브러리를 tanstack/react-table 라이브러리로 교체해야겠다는 생각이 듭니다.