[Vite] vite로 번들링 도구를 바꾸기

안녕하세요! aloveu입니다.

최근까지 vue-cli-service의 빌드로 번들링을 하고 있다가 프로젝트가 커지고, 팀도 커지고... 뭔가 애매하게 개발하는데 아까운 시간들을 조금이나마 아껴보고자 배포 프로세스 점검하고 코드 리팩토링하고 하면서 번들링까지 손대게 됐습니다.

vite를 로컬에서 적용해보니 웬걸?! 빠릅니다. 

이게 천국인가 싶어요. 이미 많이들 쓰고 계시겠지만 그나마 이 글을 보고 참고하시는 분들을 위해 그 과정들을 정리해 보겠습니다.

---

| Vite (빗)

바이트라고 읽었습니다. 하지만 빗입니다. 프랑스어로 빠르다는 의미를 가지고 있어요.

그래도 바이트가 입에 착 붙습니다.

빠르고 간결한 웹프로젝트 개발에 초점을 맞춘 차세대 빌드 툴입니다.

 

특징

1. 매우 빠른 로컬 서버를 띄워줍니다. 그냥 엔터치면 뜹니다. 😀
2. 즉시 갱신(HMR) : 파일이 변경되면 기존에는 페이지가 새로고침 됐는데 vite는 즉각적으로 변경된 모듈만 업데이트합니다. 
3. 빠른 빌드 속도: 번들링 과정을 최적화해서 지금 쓰고 있는 vue-cli에 비해 2배이상 빠른 느낌입니다.

단점

디폴트로 코드분할을 제공하는데 각 컴포넌트별로 파일이 생겨서 파일이 너무 많이 생깁니다. 

따로 chunk 파일 생성하는 법은 적겠지만 생성 방법자체는 제기준 기존 vue-cli가 더 편한 느낌이에요.

 

| Vue-cli 환경에서 마이그레이션

기존 프로젝트는 vue-cli-service로 빌드 했을때 1분이 살짝 넘어가는 정도인데 vite는 30초가 안 되는 시간에 빌드가 됩니다.

기존 프로젝트에 vite만 인스톨해서 변경하기에는 컴피그 파일들을 손대는 게 너무 많아서 vite-cli로 새 프로젝트를 설치해서 설정을 옮겨봅니다.

 

마이그레이션 순서

1. vite-cli로 새 프로젝트를 설치합니다.

npm create vite

 

2. package.json 파일 정리

기존 package.json에다가 새 프로젝트의 package.json을 비교해서 옮겨주고요. vue-cli 관련된 모듈, 불필요해진 디펜던시들은 모두 삭제해 줍니다.

그리고 빌드 스크립트를 모두 vite로 변경합니다. serve, build...

// 기존 vue-cli-service
"serve": "vue-cli-service serve --port 8000",

// vite
"dev": "vite --port 8000"

 

3. 환경변수명 수정

환경변수명 앞에 붙는 VUE_APP_를 모두 VITE_로 변경합니다.

그리고 각 컴포넌트에서 쓰고 있는 process.env.NODE_ENV를 import.meta.env.VITE_USER_NODE_ENV로 변경합니다. 

 

import.meta.env.MODE를 사용하라고 나오는데 제가 원하는 네이밍은 아니었어요. 한번 콘솔 찍어보시고 이게 맞으시면 이걸로 사용하시면 됩니다.
예를 들어 env.test 파일에 NODE_ENV= dev인데 MODE는 development로 나와요.

 

환경변수명을 그대로 쓰려면?  https://www.npmjs.com/package/vite-plugin-env-compatible

 

4. index.html 파일 위치 변경

index.html이 기존 public/ 폴더 아래에서 프로젝트의 루트로 옮겨집니다. 

멀티엔트리를 구현했었다면 그 index.html파일도 루트아래 폴더 안으로 들어가야 합니다.

그리고 index.html안에서 import 하는 js 파일을 기존 프로젝트 진입점인 main.ts로 수정해 주시면 됩니다. 
멀티엔트리로 설정한 index.html파일 안에도 해당 엔트리 파일로 임포트를 해줘야 해요.

 

5. 멀티엔트리 설정

vue.config 파일에서 했던 멀티엔트리 설정은 vite.config 파일에서 하면 됩니다.

https://ko.vitejs.dev/guide/build.html#multi-page-app

 

6. alias 설정

 tsconfig.json에서만 설정을 해줬다면 Vite는 vite.config 파일에도 해줘야 빌드가 됩니다.

 

7. sass 설정 변경

sass-loader는 package.json 파일에서 삭제하고 sass 패키지만 설치하면 됩니다.

sass에서 사용하고 있던 ~는 삭제하고요.

 

8. router에서 설정한 webpackCunkName 제거 

웹팩에서 청크파일을 만들기 위한 webpackChunkName을 모두 제거해야 합니다. 이제 webpack환경이 아니기 때문이죠.

이거 편했는데 ㅠ

vue-router의 webpackChunkName

이렇게 까지 하면 모두 vite로 변경이 된 겁니다.

 

| 참고

https://ko.vitejs.dev/