The State of JS 2021이 공개되고 Vite의 만족도와 관심도가 압도적인 걸 보고 현재 CRA로 진행중인 프로젝트에 적용해보았습니다.
https://2021.stateofjs.com/ko-KR/libraries/build-tools
Vite
Vite는 공식문서에 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구라고 작성되어 있습니다.
네이티브 ESM을 사용하여 빌드 시간을 단축시켰습니다.
Vite는 처음에 전체를 번들링한 후 변경된 부분만 묶어 빌드를 빠르게 해줍니다.
CRA 프로젝트에 Vite 적용하기
1. vite 설치 & package.json 수정
yarn add -D vite @vitejs/plugin-react vite-plugin-svgr우선 vite와 React용 플러그인을 설치합니다.
@vitejs/plugin-react : React 프로젝트에 Vite를 사용하기 위한 올인원 플러그인
vite-plugin-svgr : React에서 svg를 컴포넌트처럼 사용하기 위한 플러그인
그리고 package.json을 수정합니다.
"scripts": {
"start": "vite",
"build": "tsc && vite build",
"serve": "vite preview",
},기존에 사용하던 react-scripts 대신 vite를 이용해 실행과 빌드를 합니다.
"dependencies": {
...
- react-scripts
...
}dependencies에 있는 react-scripts를 없애줍니다.
2. vite.config.ts 작성
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgrPlugin from "vite-plugin-svgr";
// https://vitejs.dev/config/
export default defineConfig({
// This changes the out put dir from dist to build
// comment this out if that isn't relevant for your project
build: {
outDir: "build",
},
plugins: [
react(),
svgrPlugin({
svgrOptions: {
icon: true,
// ...svgr options (https://react-svgr.com/docs/options/)
},
}),
],
});
3. tsconfig.json 수정
아래 작성한 설정들은 vite 공식 문서를 참고했습니다.
// tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": false,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"types": ["vite-plugin-svgr/client"]
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}추가로 tsconfig.node.json 을 생성하여 아래와 같이 작성했습니다.
//tsconfig.node.json
{
"compilerOptions": {
"composite": true,
"module": "esnext",
"moduleResolution": "node"
},
"include": ["vite.config.ts"]
}4. index.html
기존에 /public 폴더에 있던 index.html 을 최상단으로 이동시킵니다.
그리고 아래와 같이 수정시켜줍니다.
<head>
...
<!-- CRA -->
<!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
<!-- Vite -->
<link rel="icon" href="/favicon.ico" />
<!-- CRA -->
<!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
<!-- Vite -->
<link rel="apple-touch-icon" href="/logo192.png" />
<!-- CRA -->
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
<!-- Vite -->
<link rel="manifest" href="/manifest.json" />
...
</head>
<body>
...
<!-- Vite -->
<script type="module" src="/src/index.tsx"></script>
</body>
5. env
만약 프로젝트에서 .env 파일을 관리하신다면 REACT_APP 을 VITE로 수정해주셔야합니다.
REACT_APP_VAR
VITE_VAR그리고 해당 환경변수를 프로젝트에서 부를 땐, process.env 대신 import.meta.env를 사용하셔야 합니다.
process.env.
import.meta.env.
끝!
빌드 시간 비교
vite로 바꾼 후, 작은 토이프로젝트임에도 시간의 차이를 크게 느낄 수 있었습니다.
CRA
Vite
ref :
https://www.darraghoriordan.com/2021/05/16/migrating-from-create-react-app-to-vite/
https://vitejs-kr.github.io/guide/features.html#typescript-compiler-options
https://www.npmjs.com/package/vite-plugin-svgr
에러
Duplicate identifier 'src'.
- https://stackblitz.com/edit/vitejs-vite-ct2wpw?file=index.html&terminal=dev
Property 'env' does not exist on type 'ImportMeta'.
- https://vitejs-kr.github.io/guide/env-and-mode.html#intellisense-for-typescript
댓글