Vue 2(Vue CLI)에서 Vite로 갈아타기

기존 프로젝트는 Vue2와 내부적으로 Webpack을 사용하는 Vue CLI를 통해서 개발 및 프로덕션 빌드를 진행하고 있었습니다. 현재까지는 그 규모가 크지 않아 Vue CLI로 계속해서 개발해도 큰 문제가 있었던 것은 아닙니다만, Vue CLI가 유지보수 모드로 전환되면서 Vite기반으로 시작할 것을 권고하고 있으며 Vite를 통해 확실한 성능상의 이점과 설정에 대한 간편함 때문에 충분히 고려해볼만 했습니다.

왜 Vite가 좋을까?

기존 JavaScript 기반의 도구는 프로젝트 성장에 따라 점차적으로 성능 병목 현상이 나타나기 때문에, 개발서버를 가동하는데, HMR을 이용해 변경된 파일을 적용하는데에 시간이 점차 증가하게 됩니다. 그러나 Vite는 Webpack과 같이 HMR 등 부가적인 기능을 지원하는 것은 물론이고 그 속도가 월등히 빨라 탁월한 개발경험을 줄 수 있습니다.

Vite가 빠른이유들

• 브라우저에서 지원하는 ES Modules 및 네이티브 언어로 작성된 JavaScript 도구를 활용합니다.
• Dependencies 패키지들은 ESBuild로 빠르게 사전 번들링됩니다.
• Native ESM을 이용하기 때문에 개발중인 소스코드(변화가 빈번한)들은 브라우저에서 요청하면 수정된 모듈만 교체하여 전달만 하고, 브라우저가 번들러의 작업 일부를 하게 하기 때문에 앱 사이즈가 커져도 HMR을 포함한 갱신시간에 영향을 끼치지 않습니다.
• HTTP 헤더를 활용, 요청횟수를 최소화하여 페이지 로딩을 빠르게 만듭니다.
  • 필요에 따라 소스코드는 304 Not Modified로 제공
  • 디펜던시는 Cache-Control: max-age=31536000,immutable을 이용해 캐시

---

Vue CLI에서 Vite로 마이그레이션하는 과정

Vite 및 플러그인 설치하기

• vite
• @vitejs/plugin-vue2
• unplugin-vue-components
  • vue.config.js의 transpileDependencies를 대체하기 위해 사용합니다.
  • 여기에서는 Vuetify Resolve를 위해서 사용합니다.

npm i -D vite @vitejs/plugin-vue2 unplugin-vue-components

Vue 2.7.0 이상으로 업그레이드

Vue 2.7.0버전 이하의 프로젝트라면 2.7.0이상으로 업그레이드가 필요합니다.
공식문서 가이드 보기

1. Vue 2.7.0 이상으로 업그레이드
2. vue-template-compiler 삭제
3. eslint-plugin-vue ^9.0.0으로 업데이트

vite.config.js

vite 설정파일을 작성합니다.

import path from 'path'

import vue from '@vitejs/plugin-vue2'
import { VuetifyResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: [
      {
        find: /^~/,
        replacement: '',
      },
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src'),
      },
    ],
    extensions: [
      '.mjs',
      '.js',
      '.ts',
      '.jsx',
      '.tsx',
      '.json',
      '.vue',
    ],
  },
  plugins: [
    vue(),
    Components({
      resolvers: [VuetifyResolver()],
    }),
  ],
  build: {
    target: 'esnext',
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "./src/scss/_variables.scss";
          @import "./src/scss/_style.scss";
        `,
      },
    },
  },
})

진입점 생성

index.html 파일을 프로젝트 루트 경로에 생성합니다. <body>안에서 main.js를 불러오는 것을 잊지마세요!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <title>My Page</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

환경변수 바꾸기

process.env.VUE_APP...은 더이상 Vite에서 읽을 수 없습니다.

1. VUE_APP 키워드는 VITE로 대체하세요.
2. process.env. 대신 import.meta.env.으로 환경변수에 접근하도록 변경하세요.

require 함수 쓰지 말기

Vite는 기본적으로 ESM을 지원합니다. 따라서 require 함수를 사용하지 마세요. 보통 <img>에서 이미 경로를 동적으로 가져올 때 사용하는 경우가 많습니다.

<img :src="require('src/assets/images/logo_sub.svg')" alt="logo">

<!-- 아래 처럼 바꾸세요 -->
<img :src="'src/assets/images/logo_sub.svg'" alt="logo">

---

Vite로 마이그레이션 결과

프로덕션 빌드 속도 비교

기존의 프로젝트 규모가 충분히 크지 않기 때문에 프로덕션 빌드 상에서는 유의미한 차이를 보여주진 않았지만 Vite의 빌드 속도가 약 20.75% 정도 빠릅니다.

Webpack	Vite
21.016s	16.65s

개발서버 콜드스타트 속도 비교

개발서버를 구동하는 속도는 매우 놀랍도록 개선되었습니다. 무려 59.294배나 빠르다는 측정 값이 나오는데요. 사실 Vite에서는 필요한 모듈이 로드될 때 추가적인 시간이 더 소요되어 최종적으로 페이지를 확인하는 시간까지 고려하면 그 정도의 차이라고 보기는 힘듭니다. 하지만 개발서버 구동 자체는 거의 시간소요가 발생하지 않는다고 보이는 수준입니다.

Webpack	Vite
15.133s	0.255s

---

정리

기존의 Vue 2 프로젝트 구조를 그대로 유지하면서, vite를 도입하기 위한 과정을 정리하였습니다. 2개의 플러그인만 더 사용하면 간단하게 변경해 볼 수 있기 때문에 Vite로의 마이그레이션을 고려중이라면 쉽고 빠르게 진행해보실 수 있습니다.