본문 바로가기
자습/Vue.js

[Vue3] Runtime-only 빌드와 Compiler 빌드 차이

행수쌤 2024. 11. 13. 17:21
728x90
반응형

문제발생

import { createApp } from 'vue'

const App = {
  template: 'Hello',
}
const app = createApp(App)

app.mount('#app')

실전 코드로 배우는 Vue.js 학습 중 main.ts 를 위와같이 수정하여 실행해보았더니 빈 화면과 함께

콘솔창에 위와 같은 오류가 발생하였다. alias "vue" to "vue/dist/vue.esm-bundler.js".로 설정하라고 해서 vite.config.ts에 다음과 같이 alias를 추가해 주었다.

해결코드

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx(), vueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      vue: 'vue/dist/vue.esm-bundler.js',
    },
  },
})

문제 원인

위와같은 이유가 발생한 이유는 Vue3의 Runtime-only 빌드와 Compiler 빌드의 차이 때문. Default는 Runtime-only 빌드인데 이는 template 옵션을 사용할 수 없고 render 함수만 사용할 수 있기 때문에 Compiler 빌드로 설정해준 것이다.

Vue 3의 Runtime-only 빌드와 Compiler 빌드 비교

Vue의 Runtime-only 빌드 (JRE와 비슷한 역할)

  • 목적: 애플리케이션 실행 최적화. 이 빌드는 사전 컴파일된 render 함수를 사용하여 애플리케이션을 빠르고 효율적으로 실행
  • 용도: 보통 프로덕션 환경에서 사용됩니다. 개발자가 작성한 템플릿은 빌드 시점에 미리 render 함수로 변환되기 때문에, template 옵션을 직접 사용할 수 없음
  • 장점: 템플릿 컴파일러가 없기 때문에 번들 크기가 작고 성능이 빠름
  • 비유: Java에서 JRE처럼, 코드 작성 없이도 실행 환경을 제공

Vue의 Compiler 빌드 (JDK와 비슷한 역할)

  • 목적: 애플리케이션 개발 편의성. 이 빌드는 템플릿 컴파일러를 포함하고 있어, 템플릿 옵션을 Vue 인스턴스 내에서 직접 작성할 수 있음
  • 용도: 주로 개발 환경에서 사용됩니다. 애플리케이션이 실행될 때 Vue가 템플릿을 자동으로 컴파일하여 render 함수로 변환
  • 장점: 템플릿을 직접 작성하고 수정할 수 있어, 개발 속도가 빠르고 디버깅이 편리
  • 비유: Java의 JDK처럼, 소스 코드부터 개발 및 실행 환경을 제공

기존에 <template>형태로 빌드가 되었던 이유

  1. 빌드 도구가 템플릿 컴파일을 지원
    • Vue CLI나 Vite는 .vue 파일 내부의 <template> 부분을 사전 컴파일하여 render 함수로 변환
    • 빌드 과정에서 이 도구들은 Vue 템플릿을 render 함수로 자동 변환해 주므로, 런타임에서는 template 대신 컴파일된 render 함수를 사용할 수 있음
    • 결과적으로 Vue의 runtime-only 빌드를 사용하더라도 템플릿 기능을 사용할 수 있게 됨
  2. vue 파일의 처리 과정
    • Vue CLI나 Vite는 .vue 파일을 읽을 때 vue-loader나 @vitejs/plugin-vue 같은 플러그인을 사용하여, .vue 파일 내부의 <template>을 사전 컴파일
    • 이 과정에서 <template> 태그는 render 함수로 변환되어, 애플리케이션 코드에서 컴파일된 상태로 사용
  3. 빌드 과정의 역할
    • Vue CLI는 webpack 등의 빌드 도구와 함께 vue/dist/vue.esm-bundler.js 경로를 자동으로 설정하고, 템플릿 컴파일러가 필요 없도록 미리 컴파일
    • 따라서 기본 설정으로 runtime-only 빌드를 사용하더라도, 템플릿을 사전 컴파일하여 문제 없이 사용 가능
728x90
반응형

티스토리툴바