vite : 번들(Bundle)과 롤업(Rollup)

1. 번들은 여러 개의 파일(자바스크립트, CSS, 이미지 파일 등)을 하나 또는 몇 개의 파일로 묶는 것입니다.
2. 여러 개의 파일을 읽고, 해석해서, 순서를 정리하여 하나의 번들 파일로 만드는 프로그램을 말한다.

■ 필요성
    1) 브라우저가 자바스크립트 코드를 실행할 때, 원래는 한  번에 하나의 파일만 처리할 수 있다. 처리해야 할 파일 수가 많아지다 보니 다음과 같은 문제가 발생할 수 있다. 번들러(webpack, vite, parcel)를 이용해서 묶는다(bundle).
        ⓐ 파일 한개씩 받아오게되면 느려진다.
        ⓑ 서로 의존성이 꼬일 수 있다.
        ⓒ 네트워크 비용이 커진다.         

■ 번들 전 vs 번들 후
     1) 번들 전
         src/
          ├── main.js
          ├── utils.js
          ├── event.js
          ├── style.css

    2) 번들 후
          dist/
          ├── bundle.js
          ├── bundle.css

■ 번들러 종류
    1) Webpack 
    2) Parcel
    3) Rollup
    4) Vite
        - Production 빌드 할 때 Rollup을 사용한다.

Rollup은 자바스크립트 번들러 중에 하나입니다.

■ 주요 특징
    1) ES Module(esm) 기반의 트리쉐이킹과 번들 최적화에 특화된 툴입니다.
    2) 번들 파일이 작고 빠름
    3) 자바스크립트(JavaScript) 모듈 번들러입니다.
    4) Vite 가 프로덕션 빌드할 때 사용하는 번들러가 Rollup입니다.

■  동작 원리 (순서)
    1) 엔트리 포인트 설정
       ⓐ rollup.config.js 에서 input 옵션으로 엔트리 파일(시작 파일)을 설정합니다.
          ``` 
                   export default {
                        input: 'src/main.js',
                        output: {
                             file: 'dist/bundle.js',
                             format: 'sem'
                          }
                      }
          ```

    2) 의존성 그래프 생성
       ⓐ 엔트리 파일로부터 import / export 를 분석하여, 모듈간 의존성 그래프(Dependency Graph)를 구축합니다.
       ⓑ EMS 방식으로서 정적분석(static analysis) 이라서 import/export 위치와 사용 여부를 정확히 파악할 수 있습니다.

    3) 트리 쉐이킹(Tree Shaking)
       ⓐ 의존성 그래프를 분석하여 사용되지 않는 코드(Dead Code)를 제거합니다.
       ⓑ import 했지만, 사용하지 않는 함수, 변수, 모듈 등은 최종 번들에서 빠집니다.
       ⓒ 예시) unused 함수는 번들에 포함되지 않습니다.
          ```
                    // util.js
                    export function used() { console.log('used') }
                    export function unused() { console.log('unused') }

                  // main.js
                     import { used } from './util.js'
                     used()
          ```

    4) 플러그인 실행
       ⓐ 설치한 플러그인은 순서대로 실행됩니다.
       ⓑ 플러그인은 코드 변환, 파일 읽기, 타임스크립트 처리, Babel 트랜스 파일, 이미지 압축 등 다양한 일을 담당할 수 있습니다.
       ⓒ 예시) Babel 플러그인
          ```
                   import babel from '@rollup/plugin-babel'
          ```

    5) 코드 번들링
       ⓐ 의존성 그래프를 바탕으로 모듈을 하나의 파일 또는 여러 파일로 합치는 과정입니다.
       ⓑ output.format 옵션에 따라서 esm, cjs, life, umd 등 다양한 형식으로 결과물이 생성됩니다.

    6) 코드 출력(Output)
       ⓐ 최종적으로 번들된 코드가 output.file에 저장됩니다.
       ⓑ 이 때 코드 압축(minfy) 이나 소스맵 생성도 함께 처리 가능합니다.

■ Vite
       ⓐ 개발서버 + 번틀러 통합 툴
       ⓑ Vite가 프로덕션 번들러로 Rollup을 내부에 사용하는 구조입니다.
       ⓒ vite 환경별 관계
            - 개발환경(vite dev) : ESM  방식으로 실시간 변환하므로  Rollup 번들링 없이 브라우저에 전달
            - 프로덕션(vite build) : vite.config.js 의 설정 읽기 → 내부적 Rollup API 호출 → build.rollupOptions 설정을 적용해 빌드 → Rollup 이 모듈을 번들링 및 최적화 수행 → 결과물을 /dist에 출력

■ Rollup
       ⓐ 모듈 번틀러(트리 셰이킹, 코드 분할)
       ⓑ Vite 프로덕션 빌드 내부에서 동작함