runtimecompiler和runtimeonly的区别

runtimecompiler
main函数中的代码

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

运行过程
template->ast->render->vdom->rdom
template模板-（解析）>抽象语法树-（编译）>render函数->虚拟DOM->真实DOM

runtimeonly
main函数中的代码

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App)
})

运行过程
render->vdom->rdom
render函数->虚拟DOM->真实DOM
区别
通过上面的运行过程不难看出runtimecompiler的运行步骤更多，因此相比来说runtimeonly的性能更高，实现的代码量也更少
疑问
查看runtimeonly的App.vue代码

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

不难发现其中也是有template标签的，那么这里的template为什么没有经过解析到ast的步骤呢？
其实在webpack对Vue进行的配置的时候我们我们安装了两个loader，一个是vue.loader，用来加载Vue文件，而另一个则是Vue-template-compiler，用来将.Vue文件的template转化为render函数。所以在main.js引用App时，引用的不是.Vue文件，而是已经被解析过的App对象。