---
tags: vue
---

# Runtime + Compiler vs Runtime-only

개발자도구에 뜬 아래 경고의 정체를 알아보자.

vue.runtime.esm.js:623 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. (found in <Root>)

템플릿을 실시간으로 컴파일해야 하는 경우 ->
`template` 옵션에 스트링을 넘기는 식으로 하거나 in-DOM HTML을 사용하여 element에 마운트하는 경우는 컴파일러와 전체 빌드가 필요하다.

// this requires the compiler
new Vue({
  template: '<div>{{ hi }}</div>'
})

// this does not
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

`vue-loader`를 쓰거나, `vueify`를 사용하면, *.vue 파일에 있는 템플릿은 빌드타임에 JS로 미리 컴파일된다. 따라서, 마지막 번들에서는 컴파일이 필요없게 된다.

런타임 빌드는 full-build보다 30프로정도 가벼우니, 이 방법을 사용해야 한다.

// src/index.js
import Vue from 'vue';
import AppComponent from './components/AppComponent.vue';
// root element
new Vue({
  el: '#app',
  components: {
    AppComponent
  }
});

## 출처
- [https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only](https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only)