[Vue.js] Vue2 프로젝트, Webpack에서 Vite로 마이그레이션하기!

현업에서 몇개의 레포들이 Vue2를 사용하고 있는데요. 올해의 목표에서 하나의 레포를 Vue2 → Vue3 로 마이그레이션을 하는 것으로 잡았습니다.

Vue2 프로젝트를 진행하면서, 기존의 Webpack 빌드 도구가 무겁고 느리게 느껴지기 시작했습니다. 특히, 대규모 프로젝트에서는 빌드 시간이 길어지고, 개발 서버의 반응 속도가 떨어지는 문제가 발생했습니다.

이러한 문제를 해결하기 위해 저는 Vite로의 마이그레이션을 고려하게 되었는데요! Vite는 빠른 개발 서버와 즉각적인 모듈 핫 리로딩을 제공하여 개발 생산성을 크게 향상시킬 수 있는 도구입니다. 또한, Vite는 최신 브라우저의 네이티브 ES 모듈을 활용하여 빌드 속도를 극대화하고, 번들링 과정에서의 불필요한 오버헤드를 줄여줍니다. 이전 회사에서 Vite 기반 환경에서 사용했어서 지금의 Webpack 환경이  확실히 역체감이 크게 느껴졌습니다 

 

이 글에서는 Vue2 프로젝트에서 Webpack을 Vite로 마이그레이션하는 과정을 단계별로 설명하고, 마이그레이션을 통해 얻을 수 있는 이점들을 소개하겠습니다. 이를 통해 여러분도 더 빠르고 효율적인 개발 환경을 구축할 수 있을 것입니다.🎢

 

 

 

🗓️ 24/07/16 ~ 24/07/19 

✅ 배경
✅ 방법
✅ 트러블 슈팅
✅ 결과

 

 

 

 

 

---

 

 

 

 

Why Vite ??

---

비트(Vite)는 기존의 프런트엔드 개발 경험을 향상시켜줄 새로운 프런트엔드 툴입니다. Vue 창시자 에반 유가 만들었으며 현재 Vue, React, Svelte 등의 주요 프레임워크 커뮤니티에서 주목하고 있는 도구입니다.

비트는 웹팩을 사용할 때보다 훨씬 더 빠르게 개발하고 배포할 수 있습니다. 비트는 로컬에서 개발할 때 번들링을 하지 않고 ESM 방식을 사용하기 때문에 로컬 서버 구동 속도가 매우 빠릅니다.

✦ 빠른 개발
비트는 로컬에서 개발할 때 번들링을 하지않고 ESM방식을 사용하여 서버 구동 속도가 매우 빠릅니다. 웹팩 데브 서버와 비교해봤을때 20~30배 이상 차이가 납니다. 또한, 내장된 서버는 Hot Module Replacement(HMR)를 지원합니다.

✦ Rollup기반의 프로덕션 최적화
프로덕션 빌드 시 Rollup을 사용하여 코드를 최적화합니다. Rollup은 코드를 효과적으로 트리쉐이킹 하여 불필요한 코드를 제거하고, 결과물의 파일 크기를 최소화 합니다.

✦ 다양한 프레임워크 지원
Vite는 Vue, React, Preact, LitElement 등 다양한 프레임워크를 지원하며, 커스텀 플러그인을 통해 다른 프레임워크나 라이브러리와의 호환성도 확보할 수 있습니다.

✦ CSS, 이미지, 기타 자산 처리
Vite는 CSS 모듈, CSS 프리프로세서(SCSS, Less 등), URL 참조를 통한 이미지와 기타 자산 처리를 지원합니다.

 

Vue2의 의존성에 걸려있는 라이브러리가 많기 때문에 (vue-cli, vuex, naver-map…) 전부 버전업을 하기에는 큰 시간이 소요될 것으로 예상됩니다. 이러한 의존성을 걷어낸 후 vue3 로 가는 방식을 진행중 입니다.

 

Webpack에서 Vite로 넘어가야 될 가장 핵심적인 이유가 바로 이 이유고 아래 그림이 이걸 잘 표현해주네요.

 

Vite는 개발시 내용이 자주 바뀌지 않을 Dependencies 모듈을 사전 번들링하는데 esbuild를 사용합니다. esbuild는 Go언어로 만들어졌으며 다른 JavaScript기반의 번들러보다 10~100배 빠른 속도를 가지고 있는 번들러입니다.
 

프론트엔드 개발을 하면 소스코드를 계속 갱신하면서 브라우저로 테스트를 해봐야 하기 때문에 Dev Server의 속도가 곧 개발환경의 속도라고 볼 수 있는데요. 그래서 기존의 Webpack 기반의 환경에서는 프로젝트가 커질수록  서버 구동시간과 HMR 시간이 느려지게 되고, 이걸 기다리는 시간은 그냥 낭비되는 시간이라고 생각합니다.

그래서 제일 처음 Vite 로 바꾸는 작업을 시작하게 되었습니다.

 

 

 

 

 

 

 

How to move☄️?

---

⚡️ vue 2.7 upgrade

Vite 를 vue2에 사용하기 위해서는 vue2.7 로 업그레이드 해야 합니다.

먼저, vue 를 2.7.10 (or latest) 으로 업그레이드해줍니다.

• 현재 프로젝트 버전 : vue 2.6.14
• 업그레이드 : vue 2.7.10

https://v2.vuejs.org/v2/guide/migration-vue-2-7

 

 

 

⚡️ vite-plugin-vue2 install

다음으로, vue2 환경에서 vite를 사용하기 위한 플러그인 라이브러리를 install 해줍니다.

https://classic.yarnpkg.com/en/package/vite-plugin-vue2

vite-plugin-vue2

 

 

 

 

⚡️기존 프로젝트에 디펜던시 설정 및 수정

1단계: 종속성 업데이트

Vite로 마이그레이션하는 첫 번째 단계는 package.json의 종속성을 업데이트하는 것입니다. Vue CLI 관련 종속성을 제거해야 합니다.

// package.json
"@vue/cli-plugin-babel": "~4.5.0", // remove
"@vue/cli-plugin-eslint": "~4.5.0", // remove
"@vue/cli-plugin-router": "~4.5.0", // remove
"@vue/cli-plugin-vuex": "~4.5.0", // remove
"@vue/cli-service": "~4.5.0", // remove
"babel-eslint": "^10.1.0", // remove
// remove
parserOptions: {
    parser: "babel-eslint",
},

 

 

2단계: Vite 설치 & Vite 플러그인 설치

최신 Vite 설치와 Vue 2용 커뮤니티 유지 관리 Vite 플러그인도 설치합니다.

"devDependencies": {
    "@sentry/vite-plugin": "^2.21.1", // 👈 add this
    "@vitejs/plugin-vue": "^5.0.5", // 👈 add this
    "vite": "^5.3.4", // 👈 add this 
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.39", 
    "vite-plugin-node-polyfills": "^0.22.0", // 👈 add this
    "vite-plugin-vue2": "1.8.1" // 👈 add this
  },

 

 

🔥ERROR vite-plugin-vue2 최신버전 1.9.0 으로 설치될 텐데 에러가 뜰 겁니다  아래의 해결방법을 참고하세요 .

• vite-plugin-vue2 1.9.0 👉 1.8.1 downgrade

https://github.com/underfin/vite-plugin-vue2/issues/16

no corresponding SFC entry in the cache Error when importing a .vue file from node_modules · Issue #16 · underfin/vite-plugin-

 

 

 

3단계: ES Module 환경 설정

추후 ESLint 설정을 위한 설정을 미리 추가해줍니다.

 

참고: https://vueschool.io/articles/vuejs-tutorials/eslint-and-prettier-with-vite-and-vue-js-3

ESLint and Prettier with Vite and Vue.js 3 - Vue School Articles

 

 

// package.json
"eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "es2022": true // 👈 add this
},

 

 

 

 

⚡️ vite 설정

1단계: Vite 설정

: 기존 webpack 설정 파일 대신 Vite의 설정 파일(vite.config.js)을 작성합니다. 주로 필요한 설정은 라우팅, CSS 전처리기, 플러그인 등입니다.

예를 들어, vite.config.js 파일에서 Vue 플러그인을 설정할 수 있습니다:

vite-plugin-vue2먼저, 공식 Vite Vue 플러그인 대신 Vue 플러그인을 가져오겠습니다 .

//vite.config.js
import { defineConfig } from "vite";
import { createVuePlugin as vue } from "vite-plugin-vue2";
import { sentryVitePlugin } from "@sentry/vite-plugin";
import { nodePolyfills } from "vite-plugin-node-polyfills";
import { fileURLToPath, URL } from "node:url";

export default defineConfig({
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  plugins: [
    vue(),
    nodePolyfills(),
    sentryVitePlugin({
      authToken: "~~",
      org: "~~",
      project: "~~",
      telemetry: false,
    }),
  ],
  preview: {
    port: 3000,
    strictPort: true,
  },
});

 

 

 

2단계: index.html 이동

Vue CLI와는 달리 Vite는 실제로 Vue.js 애플리케이션을 담고 있는 index.html 파일을 공개 디렉터리가 아닌 프로젝트 루트에 두기 때문에 이 파일을 옮겨야 합니다.

또한 index.html 내부에서 몇 가지 변경 작업을 해야 합니다.

먼저, htmlWebpackPlugin 적힌 코드 삭제합니다.      <%= htmlWebpackPlugin.options.title %>

        <%= BASE_URL %> 또한 플레이스홀더를 절대 경로로 바꿔야 합니다.

 

// index.html

<link rel="icon" href="<%= BASE_URL %>favicon.ico"> 👈 delete!

<link rel="icon" href="/favicon.ico"> 👈 add!

 

 

마지막으로, 가장 중요한 점은 JavaScript 애플리케이션이 더 이상 자동 주입되지 않으므로 다음과 같이 포함해야 한다는 것입니다.

<script type="module" src="/src/main.js"></script>

 

 

 

 

 

⚡️ script 업데이트

package.json으로 돌아가서 스크립트도 업데이트해야 합니다. 이전 vue-cli-service명령을 Vite 특정 명령으로 변경합니다.

// package.json
  "scripts": {
		// 기존
    "serve": "vue-cli-service serve",
    "build-dev": "vue-cli-service build --mode development",
    "build-real": "vue-cli-service build --mode production",
		// vite
    "serve": "vite --mode development --port 9090",
    "build:development": "VITE_ENV=development vite build --mode development",
    "build:release": "VITE_ENV=release vite build --mode release",
    "build:production": "VITE_ENV=production vite build --mode production",
    "preview": "vite preview"
  },

 

 

 

 

⚡️ 환경변수 업데이트

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

 

 

더 이상 변수에서 환경 변수에 액세스할 수 없습니다 process. 대신 .에서 찾을 수 있습니다 import.meta.env.

// router/index.js
base: process.env.BASE_URL, //remove
base: import.meta.env.BASE_URL,

 

 

또한, VUE_APP_클라이언트에 노출된 환경 변수를 선언하는 데 사용되는 접두사가 로 변경되었습니다 VITE_.

따라서 해당 환경 변수가 있는 경우 이에 따라 업데이트해야 합니다.

/** @return string */
export const GIT_REV = import.meta.env.VITE_GIT_REV;
/**
 * @return prod | qa | dev
 * 실행하고 있는 망에 대한 정보 입니다.
 *  */
export const ENV = import.meta.env.VITE_ENV;
/**
 * @return boolean
 *
 * 모니터링 툴(sentry)등의 활성화 여부에 대한 정보 입니다.
 *  */
export const MONITOR_ENV = process.env.VITE_MONTIOR_ACTIVE;

 

 

 

⚡️SFC import 시 .vue 확장자 추가

//ex ) .vue 추가
import App from "./App.vue";

 

 

 

 

이런 과정으로 webpack -> Vite 로 vue2 환경에서 마이그레이션 완료 했습니다.

 

 

 

 

 

 

 

 

 

🚨Trouble Shooting

---

아래는 이슈가 터졌던 부분에 대한 해결한 과정을 남겨봤습니다. 참고바랍니다 

 

 

🚨 achrinza/node-ipc node error

 

@achrinza/node-ipc node 20

 

해결 : 

https://github.com/vuejs/vue-cli/issues/7424

Node 18 support : @achrinza/node-ipc@9.2.2: The engine "node" is incompatible with this module. Expected version "8 || 10 || 12

해결 : 9.2.7 로 변경 필요 !

 

cli 종속성에 걸리는 패키지 모두 삭제 필요

cli 에서는 작동 안되는 듯

vite 로 바꿔라는 답변 밖에 없음.

 

 

 

 

🚨jwt ERROR

해결 : 

https://stackoverflow.com/questions/72696062/showing-util-inherits-is-not-a-function-while-importing-jwt-in-vue-vite-js

Showing util.inherits is not a function while importing jwt in vue vite.js

 

 

 

 

🚨 style이 제대로 먹지 않는 이유

• 현재 style 태그에 src를 이용해서 사용하고자 하는 css파일을 불러오는 방식인데, 해당 방식이 vite 및 vue 2.7로 올리면서 제대로 동작하지 않음을 확인했습니다. style 태그 내에서 @import를 활용해서 해야 합니다.

// 변경 전
<style src="./layout.css" scoped></style>
<style src="@/assets/css/newGlobal.css" scoped></style>
// 변경 후
<style scoped>
@import './layout.css';
@import '@/assets/css/newGlobal.css';
</style>

 

 

 

 

 

 

 

 

 

현재 프로젝트 비교 Webpack vs Vite

---

실무에서 개발하고 있는 프로젝트의 현재 스펙은 웹팩 기반으로 되어 있습니다.

아래는 기존의 빌드 결과와 Vite 로 마이그레이션 하고 다시 측정한 결과입니다.

 

🚮 Webpack 기반 

dev 로컬 실행시 속도 대략 8초  소모

 

 

 

🆕 Vite 로 변환하고 실행 [361ms —> ✨ 개빠르다! ]

dev 로컬 실행시 속도 대략 0.4 초 소모

 

production build 대략 15초

 

어후 속이 다 시원하네요,, 개발때마다  로컬실행시 10초 정도 소요되던게 1초도 안돼서 실행이 되니까 너무 좋습니다 😊

역시 리팩토링은 불편함을 개선하려는 노력에서 시작되는 것 같습니다.

특히, Vite로 전환한 후 가장 크게 느낀 점은 로컬 개발 서버를 실행할 때마다 10초 정도 소요되던 시간이 1초도 채 걸리지 않게 되었다는 것인데요. 이로 인해 개발 속도가 눈에 띄게 빨라졌고, 코드 변경 사항을 즉시 확인할 수 있어 생산성이 크게 향상되는 것 같아요

 

 

 

 

 

 

 

 

---

참고:

https://blog.hectodata.co.kr/bonjour-vite/ Introduction | Cracking Vue.js

VueSchool_ioHow to Migrate from Vue CLI to Vite - Vue School Articles