[React | vite] 번들 사이즈 비주얼라이저(애널라이저)

이전에 프로젝트는 CRA로 생성하여 webpack기반이었고 이 외에도 next로 프로젝트를 했을 때에도 기본적으로 CNA(create next app)도 webpack기반이라 webpack bundle analyzer 를 사용하면 됐습니다. 
하지만, Vite의 경우는 개발모드에서 esbuild를 사용하고 프로덕션용 최종 배포 시에는 rollup을 활용합니다.
즉, rollup의 플러그인을 활용하여 번들 사이즈를 체크해야한다는 소리입니다. 물론 vite에서도 webpack의 플러그인을 활용할 수는 있다고 합니다.(저는 그냥 호환성을 고려하여 roollup의 플러그인을 활용했습니다)
 
비주얼라이저 (혹은 애널라이저)는 어떤 것을 갖다 쓰면 좋을 지하고 확인하던 차에 npm trends 로 어느 패키지가 가장 많이 사용되는 지 확인할 수 있었습니다. 

"rollup-plugin-visualizer": "^5.9.0",

rollup-plugin-visualizer가 압도적인 다운로드 수를 보여주고 있으며 4개월 전에 최신 배포가 되었습니다. 계속해서 관리되는 패키지라는 점이 사용하기 좋아보입니다. 🤸‍♀️
롤업 플러그인 비주얼라이저 npm 
 
패키지 버전 정보 

//package.json


//중략
"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "rollup-plugin-visualizer": "^5.9.0",
    "sass": "^1.62.0",
    "vite": "^4.2.0"
  }

vite 설정 정보

//vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    visualizer({
      filename: "./dist/report.html",
      open: true,
      brotliSize: true,
    }),
  ],
});

• defineConfig 함수: 빌드 설정 정의
• plugins 속성 내에 rollupOptions인 rollup설정을 구성합니다.

비주얼라이저의 기본 옵션들입니다. (출처: 플러그인 repo)

• filename (string, default stats.{ext depending template}) - name of the file with diagram to generate
• title (string, default Rollup Visualizer) - title tag value
• open (boolean, default false) - Open generated file in default user agent
• template (string, default treemap) - Which diagram type to use: sunburst, treemap, network, raw-data, list.
• gzipSize (boolean, default false) - Collect gzip size from source code and display it at chart.
• brotliSize (boolean, default false) - Collect brotli size from source code and display it at chart.

+ 외에도 디테일한 옵션을 더 할수 있는 옵션이 있습니다. 자세한 내용은 플러그인 repo 참고

개인적으로 webpack 애널라이저가 더 명시적인 거 같다..비슷하긴하지만(내가 세팅을 못해서 그런 거 일수도)
폰트 사이즈에 눈이 터져버릴거같다; 자체적으로 폰트 사이즈를 조정해줘야 할 거 같은데.. 커서를 올릴 때 설명 박스가 보여서 그거때문에 일부러 저렇게 폰트사이즈를 작게한건지.. ^^