参考vue文档链接： cn.vuejs.org/v2/guide/in…
runtime-Compiler 和 runtime-only在main.js文件的区别
//（1） Runtime-Compiler
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
// （2）Runtime-only
new Vue({
el: '#app',
render: h => h(App)
})
在上述代码块中可以看出最大的区别在于 ：
runtime-Compiler 中的参数是 components 和 template 。而runtime-only版本中的参数是 render 函数。
runtime-only 版本 不能有 template
在这个vue不完整版，需要借助webpack的 vue-loader加载器 把vue文件编译成js。
webpack使用vue-loader将vuew文件编译js的过程中会将组件的template模板编译位render函数，所以我们得到的是render函数就如上图所示。
所以，该版本只会包含运行时的vue代码，对于template这种需要编译，只交给webpack即可。
这会使得该版本代码的体积小。
runtime-complier版本 可以有template
如果写了template，那么就会在运行时直接编译成render函数， 而不是依靠webpack来帮助编译，这不仅仅使得该版本体积变大，而且在编译过程也会对性能有一定的损耗。
runtime-complier 解析过程：
- 第一步：将template模板转换成抽象语法树（ast）;
- 第二步：通过render函数将抽象语法树转换成虚拟DOM（vdom）;
- 第三步：将虚拟DOM转换成真正的DOM； template => 抽象语法树(ast) => render() => 虚拟DOM(vdom) => 页面
runtime-only 解析过程：
- 第一步：vue-template-compiler插件直接将组件转换成 render函数；
- 第二步：将render函数返回的虚拟DOM转换成页面； render() => 虚拟DOM(vdom) => 页面；
总结
| vue完整版（runtime-compiler） | vue非完整版（runtime-only） | 评价 | |
|---|---|---|---|
| 特点 | 有compiler | 没有compiler | compiler 占40%体积 |
| 视图 | 写在HTML里或者写在template选项 | 写在render函数里用h来创建标签 | |
| cdn引入 | vue.js | vue.runtime.js | 文件名不同 |
| webpack引入 | 需要额外配置alias | 默认使用此版本 | |
| @vue/cli 引入 | 需要额外配置 | 默认使用此版本 |
因此推荐使用 vue非完整版（runtime-only）。
优点:
- 保证用户体验，用户下载的JS文件体积更小，但支持h函数（render函数中的h）。
- 保证开发体验，开发者可以直接在vue文件里写html标签，而不写h函数
- 累活都让loader做，vue-loader把vue文件里的html转为h函数。
