使用Vue脚手架构建项目时Runtime + Compiler和Runtime-only的区别

在使用vue-cli脚手架构建项目时，会遇到一个选项Vue build(vue构建)，有两个选项，Runtime + Compiler和Runtime-only,以下为有道翻译直译

• Runtime + Compiler: recommended for most users
  运行时+编译器:推荐给大多数用户–有道翻译
• Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere
  仅限运行时:大约6KB的轻量级min+gzip，但是模板(或任何特定于vue的html)只允许在.vue文件中使用——其他地方需要呈现函数–有道翻译

vue官方文档也有相关介绍如下（对不同构建版本的解释）

运行时 + 编译器 vs只包含运行时

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版：

// 需要编译器
new Vue({
  template: '
{{ hi }}
'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。如果你仍然希望使用完整版，则需要在打包工具里配置一个别名：

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
    }
  }
}

废话不多说，我直接分别使用两种方法构建一个项目看看区别，构建完成后，对比发现只有amin.js不同，如下所示

• Runtime+Compiler版本

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 components: { App },
 template: ''
})

• Runtime-only版本

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 render: h => h(App)
})

简单理解，我们在书写.vue代码时，所有的HTML代码都是包含在