Vite

Vite

• 프랑스어로 "빠르다"라는 의미

• Vue를 개발한 에반 유가 개발을 위한 개발 서버 기능과 프로덕션을 위한 번들 기능을 가진 빠른 개발 도구

  • 처음엔 vue에서 쓰였지만 현재는 다른 툴들에도 널리 쓰이고 있음

• 기본으로 타입스크립트 및 각종 css 로더를 내장하고 있으며 HMR(Hot Module Replacemen)과 개발 서버, Proxy 등을 지원

• 내부적으로 esbuild와 Rollup을 사용함

  • 프로덕션을 위한 번들링에는 Rollup을 사용함

• 웹팩의 복잡한 설정 방식을 좋아하지 않는 Rollup 사용자들을 대거 흡수하여 기하급수적으로 생태계에서 성장함

• 개발 환경이 빠르다는 장점으로 많은 프로젝트들이 웹팩에서 비트로 변경했음

  • Native ESM, esbuild를 통한 사전번들링으로 빠름

• 모듈 페더레이션을 공식적으로 지원하고 있지는 않지만, 플러그인을 통해 제공함

  • 최근 발표에서는 마일스톤에 모듈 페더레이션이 포함됨

Vite가 해결한 문제

• 지루할 정도로 길었던 서버 구동을 단축시킴

  • 콜드 스타트(최초로 실행되어 이전에 캐싱한 데이터가 없는 경우)방식으로 개발서버를 구동할 때, dependencies와 source code 두가지 카테고리로 나누어 개발서버의 시작 시간을 개선

  • esbuild를 이용해서 dependencies를 ESM으로 불러올 수 있도록 사전 번들링함

  • vite는 Native ESM을 이용해 source code를 만들어내고, 브라우저가 Native ESM을 그냥 가져다 쓰기 때문에 마치 브라우저가 번들링 일부를 담당하게 됨

• 느렸던 소스 코드 갱신

  • vite는 번들러가 아닌 ESM을 이용해서 HMR을 지원함

  • 어떤 모듈이 수정되면 vite는 수정된 모듈과 관련된 부분만을 ESM으로 다시 만들어냄

일단 서버를 띄우고 서버에 요청이 들어오면 해당 페이지에서 사용되는 소스코드들을 사용, 해당 코드들은 이미 ESM 방식으로 사전 번들링 되어있음 -> 변경이 발생한 부분만 다시 ESM으로 만들어내기 때문에 훨씬 빠름

주요 기능

템플릿을 통한 빠른 프로젝트 생성

• Vite는 Node.js 버전 18++ 또는 20+을 필요로 함

  • 일부 템플릿의 경우 더 높은 버전을 요구

• pnpm create vite@latest [프로젝트 명] -- --template[템플릿 명]

  • React 관련 템플릿: react, react-ts, react-swc, react-swc-ts

npm을 이용한 의존성 추가 및 사전 번들링

• Vite를 통해 ESM 스타일로 사전에 번들링된 CommonJS 및 UMD 모듈을 import 할 수 있다.

  • 이 과정은 esbuild를 통해 이루어지며, JS 기반의 다른 번들러보다 빠른 콜드 스타트가 가능함

• /node_modules/.vite/deps/my-dep.js?v=f3sf2ebd 와 같이 URL을 이용해 ESM을 지원하는 브라우저에서 모듈을 가져올 수 있도록 import 구문을 수정

• 디펜던시는 반드시 캐시된다.

Hot Module Replacement

• Vite는 기본적으로 ESM를 통해 HMR API를 제공함

• HMR 기능이 있는 프레임워크는 API를 활용하여 페이지를 다시 로드하거나 애플리케이션 상태를 날리지 않고 즉각적이고 정확한 업데이트 제공함

• Vite는 Vue Singlie File Components, React Fast Refresh와 같은 First-part HMR 모듈을 제공

• create-vite 에서 제공하는 템플릿 안에는 HMR 모듈이 포함되어있기 때문에 별도 설정할필요 없음

내장 로더

• TypeScript - 트랜스파일만 수행하며, 타입 검사는 IDE와 빌드 프로세스에서 진행하도록 권장함

  • 타입스크립트를 지원하지만 타입검사를 수행 하지 않기 때문에 빌드 타이밍에 tsc를 통해 타입검사를 따로 해주어야함

• JSX - .jsx와 .tsx 역시 사용 가능. esbuild를 이용해 컴파일

• CSS - .css파일을 가져오면 HMR을 지원하는 <style> 태그를 통해 페이지에 해당 콘텐츠가 주입됨

• Png - 정적 에셋을 import하는 경우, 이에 대한 Public URL이 반환됨

• JSON - JSON 파일은 바로 import 가능, 가져올 필드를 지정하면 트리 세이킹 됨

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), dts({insertTypesEntry: true})],
  build: {
    lib: {
      entry: "src/lib.ts",
      name: "ui-kit",
    },
    rollupOptions: {
      // 번들링할 때 포함하지않고 외부에서 받아서 쓰도록 하겠다. === peerDependencies
      external: ["react", "react-dom"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
        }
      }
    },
  },
});

React를 포함해서 번들링하게되면 리엑트 소스코드가 라이브러리에 들어가기 때문에 리엑트 컴포넌트를 라이브러리로 만들 때 리엑트를 포함해서 만드는게 아닌 사용하는 쪽에서 리엑트를 가지고 사용하도록 해야한다.

Typescript를 사용한다면 패키지로 제공할 떄 Type Definition을 제공해주는것이 좋다.

• vite-plugin-dts

• insertTypesEntry: true -> 타입들의 Entry 파일을 만들어 package.json의 types에 연결

peerDependencies는 사용하는 측에서 해당 디펜더시를 가지고 있어야한다고 정의하는것

dependencies와 별도로 정의하는것 (즉, 중복으로 작성되도 문제없음)

Package.json

• 빌드된 결과물을 패키지에 제데로 지정해서 다른 패키지가 가져다쓸때 소스코드로 잘 연결되도록 설정

"type": "module",
"files": ["dist"], // 만들어진 최종 결과물이 있는 폴더
"main": "dist/ui-kit.umd.cjs", // main은 보통 commonJS 형식으로 가져갈때 main을 탐
"module": "dist/ui-kit.js", // module은 esm 형식
"exports": {
  ".": { // 패키지 이름만할때는 '.'만 사용
    "import": "./dist/ui-kit.js", //import 문으로 가져갈때 어떤 소스코드와 연결되는지?
    "require": "./dist/ui-kit.umd.cjs",
    "types": "./dist/lib.d.ts",
  }
},
"types": "./dist/lib.d.ts", // 위 Export의 types와 동일