- 펫모리 프로젝트에서 Webpack으로 설정되어 있던 번들러를 Vite로 마이그레이션 작업한 것을 정리하고자 한다.
번들러란?
-
번들러는 의존성이 있는 모듈코드를 하나의 파일로 만들어주는 도구이다. 즉 코드묶을을 만들어준다고 생각하면 쉽다.
-
CSR 방식으로 생성된 웹은 build시 웹팩을 통해 build된 파일을 만들고 이를 웹 호스팅 서비스를 이용하는 방식으로 배포를 많이 진행한다.
(서버 호스팅 즉 서버를 통째로 임대 할 수도 있지만, 비용이 많이 발생한다.) -
이때 사용자가 url을 통해 페이지에 접속하면, build된 번들파일(bundle.js)을 받고 이를 Client 측에서 Rendering 하는 방식으로 렌더링이 이루어진다.
Webpack의 단점?
-
기본적으로 CRA를 통해 React 프로젝트를 생성하면 기본 번들러로 Webpack이 설정된다.
-
브라우저에서 ESM(ES Modules)을 지원하기 전까지, JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었다.
-
그래서 소스 모듈을 브라우저에서 실행 할 수 있는 파일로 bundle.js를 번들러가 처리해 보내주었고, webpack, rollup, parcel과 같은 도구들은 이런 작업을 담당해 프론트엔드 개발자의 생산성을 높혔다.
-
하지만 웹팩은 development 환경에서 소스코드와 모든 종속관계의 모듈을 번들링 후 서버가 준비되고(초기 서버구동시간 오래걸림), production build에서 빌드하는데 오랜 시간이 걸리는 단점이 존재한다.
-
소스코드 업데이트시 번들링 과정을 다시 거쳐야만 했다. Hot Module Replacement 기능을 제공하긴 하지만 이는 APP의 규모가 커질수록 속도가 느려지는 단점이 있었다.
-
(HMR은 브라우저를 새로 고치지 않아도 웹팩으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정입니다.)
Vite
-
시간이 지나고 ES Module을 브라우저에서 지원하여 script type="module"로 불러올수 있게 되었다.
-
Vite는 사전 번들링으로 Esbuild를 사용하고, 어플리케이션 모듈을 dependencies와 source code 두 가지 카테고리로 나누어 개발 서버의 시작 시간을 개선한다.
-
소스코드 자체는 많은부분에서 업데이트가 되기 때문에 dependencies가 변하지 않았다면 캐싱된 결과를 사용하는 과정으로 빌드속도를 높혔다.
-
Vite는 HMR기능을 ESM방식을 통해 제공한다. 번들러가 아닌 ESM을 사용해서 코드 수정시 번들을 다시 만드는 것이 아니라 수정된 모듈과 관련된 부분을 교체하는 과정을 통해 생산성을 높혔다.
Webpack To Vite 마이그레이션
-
마이그레이션 작업은 아래 두 Reference를 보며 진행했다. 자세한 내용은 필자보다 나머지 Reference들이 더 상세하게 작성하여 그것을 참고하면 좋겠다. 간략히 흐름정도만 정리하고 넘어가려고 한다.
-
진행과정은 다음과 같다.
1.빈 프로젝트에 Vite 설치 (npm install vite)
2.기존 모듈 제거 (rm -rf node_modules)
3.package.json복사, 설정파일 복사
4.public/index.html 이동
3.package.json, 설정파일 복사
-
이 그림은 Vite를 적용한 프로젝트구조이다.
-
새로 생성한 vite 프로젝트에서 tsconfig.json, tsconfig.node.json, vite.config.ts,
vite-env.d.ts파일을 복사해온다. -
여기서 tsconfig에 기존 컴파일러 옵션이 있다면 기존사항을 합치고,
-
src/react-app-env.d.ts React 환경변수 관련파일을 vite-env.d.ts로 바꿔줘야 한다.
4. public/index.html이동
-
public/index.html을 root directory로 이동하고, 아래 코드를 추가한다.
-
script type="module" src="/src/index.tsx" 여기서 이 코드는 웹팩의 entry(시작점이라고 생각하면 된다.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link ref="icon" href="public/favicon.ico" />
</head>
<body>
<title>PetMory</title>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script> <!-- 추가한코드 -->
</body>
</html>
config, 추가 port 설정
-
먼저 vite로 실행할 앱의 port번호가 제각각이여서 3000으로 맞추어 실행하였다. 이는 package.json에서 수정 가능하다.
-
start 명령어에 --port 옵션을 주어서 해결하였다.
"scripts": {
"start": "vite --port 3000",
"build": "tsc && vite build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"preview": "vite preview"
},- 또한 서버가 구동되고 자동으로 html페이지가 열리지 않아서, vite config을 다음과 같이 수정하여서 이를 해결하였다.
//vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
open: '/index.html',
},
});
- 초기서버 구동시간이 536ms로 웹팩과 비교했을때 엄청나게 빨라진 것을 확인 할 수 있었다.
ref)
- Vite 공식문서 :
https://ko.vitejs.dev/guide/why.html
