Vite Feature

SUNG JUN LEE·2023년 6월 2일
0

vite

목록 보기
2/4

vite의 특징에 대해서 알아보자.

NPM 의존성 해결 및 프리번들링

Native ES import는 bare module imports를 지원하지 않는다.

import { someMethod } from 'my-dep'

위 코드는 브라우저에서 오류가 발생한다. vite는 제공되는 모든 소스파일에서 이러한 bare imports를 감지하고 다음을 수행한다.

  1. 프리번들링을 통해 로등 속도를 개선하고 CommonJS / UMD 모듈을 ESM 으로 변활할 수 있으며 esbuild를 통해 수행한다. 콜드 트스타트시간이 다른 번들러보다 훨씬 빠르다.

Hot Module Replacement

vite는 기본 ESM을 통해 HMR API를 제공한다. HMR 기능이 있는 프레임워크는 API를 활용하여 페이지를 다시 로드하거나 애플리케이션 상태를 날리지 않고 즉각적인 업데이트를 제공한다.

create-vite 를 통해 생성한 템플릿 에서는 수동으로 설정할 필요가 없다.

TypeScript

Transpile Only

.ts 파일에 대해서만 트랜스파일을 수행하며 타입 검사를 수행하지 않는다.

vite의 역할은 소스 모듈을 브라우저에서 최대한 빠르게 실행하는 형태로 변환하는 것이다.

이를 위해 트랜스폼 파이프라인에서 정적 분석 검사를 분리하는것이 좋다.

esbuild로 인하여 바닐라 tsc보다 20~30배 빠른 속도로 트랜스파일 하며, HMR 업데이트는 50ms 이내에 브라우저에 반영될 수 있다.

참고로 타입만을 가져오는 경우 잘못 번들링이 될 수 있으며, 이는 타입 전용 Imports와 Exports를 사용하여 이 문제를 우회할 수 있다.

TypeScript Compiler Options

tsconfig.jsoncompilerOptions 에 있는 구성 필드를 수정 시 주의해야한다.

isolatedModules

  • true로 설정되어 있어야 한다.
  • esbuild는 타입 정보 없이 변환만 수행하므로 const enum 또는 암시적으로 타입만을 가져오는 것과 같은 특정 기능을 지원하지 않습니다.
  • 이를 감지하기 위해 tsconfigl.jsoncompilerOptions 설정의 isolatedModules: true 와 같이 설정해줘야만 하며, 이 설정으로 TS가 위와 같은 상황에서 작동하지 않는 기능들에 대해 경고할 수 있게 된다.

useDefineForClassFields

  • vite 2.5.0부터는 TypeScript 대상이 ESNext 또는 ES2022 이상이면 기본값이 true 가 된다.
  • 이는 tsc 4.3.2 이상의 동작과 일치하며 ECMAScript 런타임 동작이기도 하다.
  • 클래스 필드에 크게 의존하는 라이브러리를 사용하는 경우 라이브러리의 사용법에 주의해야 한다. 대부분 라이브러리에서는 MobX와 같이 true 값을 요구한다.
  • 일부 라이브러리에서는 false로 값을 바꾸어 주어야 한다.

빌드 결과에 영향을 주는 기타 컴파일러 옵션

TSconfigDocs

  1. extends
  2. importsNotUsedAsValues
  3. preserveValueImports
  4. jsxFactory
  5. jsxFragmentFactory

기존 코드에서 isolatedModules : true 마이그레이션 작업이 어려운 작업이라면 타사 플러그인을 사용하여 문제를 해결할 수 있다. ex) rollup-plugin-friendly-type-imports 그러나 이 방법은 공식적으로 지원되지 않는다.

Client Types

vite는 기본적으로 Node.js API 기반의 타입 시스템을 사용한다.
클라이언트 측 코드의 환경을 변경하려면 d.ts 파일을 추가해야 한다.

// vite-end.d.ts
<reference types="vite/client" />

혹은 tsconfig.json 내부의 compilerOptionstypes 속성의 값으로 ["vite/client"] 을 넣어주어도 된다.

{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

위 설정은 다음에 대한 Shim이 제공된다.
1. svg와 같은 에셋
2. vite를 통해 주입되는 import.meta.env 에서 명시된 환경변수 타입들
3. import.meta.hot 에 명시된 HMR API 타입들

기본 타입을 재정의 하기 위해서는 타입 정의 파일을 만든 뒤 해당 타입 파일에 대한 참조를 추개햐아 한다.

*.svg 의 기본적인 import 결과를 React 컴포넌트로 만들기 위해서는 다음과 같은 작업을 한다.

// vite-env-override.d.ts 타이핑을 포함하는 파일
declare module '*.svg' {
  	const content: React.FC<React.SVGProps<SVGElement>>
    export default content
}
// vite/client 에 대한 참조를 포함하는 파일
<reference types="./vite-env-override.d.ts" />
<reference types="vite/client" />

CSS

vite는 postcss-import 를 이용해 CSS의 @import 를 처리한다.
또한 가져온 파일이 다른 디렉터리에 있더라도 모든 CSS url() 참조는 정확성을 보장하기 위해 항상 자동으로 리베이스 된다.

@import 별칭과 URL리베이스는 Sass 및 Less 파일에도 지원된다.
링크참조 CSS 전처리기 링크

profile
FE developer

0개의 댓글