Webpack 너무 느려.. Vite 마이그레이션

프로젝트를 진행하면서 Vue-CLI로 프로젝트를 생성하였기 때문에 빌드속도가 느려도 너무 느리다..
프로젝트의 규모가 작진 않기 때문에 서버 실행의 속도가 진짜 느려도 너무 느리다.. 이게 다 Babel 때문이다.
느리다는 단점도 있고 Vue-CLI 공식 홈페이지에서도 Vite를 사용하길 권장하고 있기 때문에 마이그레이션을 꼭 하고 넘어가야 된다고 생각한다.
그래서 이번에는 ESM 기반의 빌드 Tool을 사용하는 Vite로 마이그레이션을 진행했던 과정에 대해서 설명하려구 한다.

 

처음 해보는 마이그레이션이기도 하였고, 어떤 에러가 발생할 지 모르기 때문에 새롭게 브랜치를 생성 후 진행하였다.

1. Vite환경 프로젝트로 생성 

아래의 명령어 입력시 프로젝트 이름을 설정 하라고 나오는데 필자는 해당 폴더내에 파일들을 생성해야 되기 때문에 .만 입력하였다.

나머지 부분들은 기존에 돌아가던 환경과 동일하게 구성하였다.

npm init vue@latest

 

 

2. 특정 컴포넌트와 유틸함수, 디렉티브, Compositions 등 필요한 파일 이전 브랜치에서 옮기기

 

 

3. index.html 설정

기존에는 public내부에 있었던 index.html이 vite로 환경을 변경하게 되면서 프로젝트 루트 폴더로 변경이 되었는데, 이 부분은 index.html이 추가적인 번들링 과정없이 앱의 진입점이 되게끔 vite에서 의도적으로 설계한 것이다.

3.1 텔레포트를 위한 태그 추가

기존 프로젝트에서 텔레포트를 통해서 Overlay를 띄워주고 있는데 이동하려는 Dom이 없는 경우 에러가 발생하기 때문에 해당 태그를 추가해주는 작업을 진행해야 된다. 필자도 까먹고 넘어갔기 때문에 주의하기를 바란다.

...
<div id="modal"></div>
...

3.2 favicon 경로 설정

위에 설명한 것 처럼 이제 index.html은 번들링 과정을 거치지 않기 때문에 경로를 아래와 같이 public을 root로 설정되게끔 재설정해줘야 된다.

<link rel="icon" type="image/svg+xml" href="/favicon.ico" />

 

 

4. alias 경로 문제 설정

번들링과정에서 vite에게 우리가 설정한 경로를 알려줘야 되는데 아래와 같이 설정하지 않으면 경로와 관련해서 에러가 발생하기 때문에 꼭 설정하고 넘어가야 된다.

• Vite에게 알려주기

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

export default defineConfig({
	plugins: [
		vue(),
	],
	resolve: {
		alias: [
			{ find: "@", replacement: path.resolve(__dirname, "./src") },
		],
	},
});

 

• IDE에게 알려주기

빌드를 위해 vite.config.js를 설정해줬다면 자동완성을 위해선 IDE에게도 경로를 알려줘야 된다. 타입스크립트를 사용하고 있지 않기 때문에 ts.config.json이 아닌 js.config.json에 아래의 코드를 추가해서 작성해주었다.

{
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			"@/*": ["./src/*"]
		}
	}
}

 

 

5. env파일(환경변수 설정 및 접근)

이전 프로젝트 환경에서는 접두사가 VUE_APP_*과 같이 작성해줘야 됬지만, Vite환경으로 변경되면서 VITE_* 접두사를 변경해야 된다.

VUE_APP_BASE_URL를 VITE_BASE_URL로 변경해줘야 된다.

그리고 등록된 환경변수를 접근하기 위해선 process.env에서 import.meta.env로 변경해줘야 된다.

예시)

const instance = axios.create({
	baseURL: process.env.VITE_BASE_URL,
	...
});

const instance = axios.create({
	baseURL: import.meta.env.VITE_BASE_URL,
	...
});

 

 

6. Sass를 사용하고 있다면?

만약 스타일 전처리기 중 Sass를 사용하고 있지 않다면 상관 없겠지만 프로젝트에서 만약 Sass를 사용하고 있다면, 

 

기존에는 아래에 두개의 라이브러리를 설치해야 하지만

"node-sass",
"sass-loader"

 

Vite를 환경을 변경하게 된다면 sass라이브러리만 설치하면 된다.

"sass"

 

이렇게 필요한 sass라이브러리 다운로드를 진행한다면 아래와 같이 정상적으로 컴포넌트 내부에서 style태그 안에서 sass를 사용할 수 있게 된다.

<style scoped lang="scss">
...
</style>