Runtime-Compiler和Runtime-Only的区别

咱们使用 vue init 命令建立脚手架的时候，会有以下选择

• Runtime + Compiler
• Runtime-only

那么它们究竟有什么区别呢，今天咱们就来探讨一下

首先，咱们分别经过这两种方式，建立Vue脚手架。咱们来看一下二者的 main.js 有什么不同

区别很明显，在 Vue 实例中，runtime-compiler 建立的项目中的参数是 compoennts 和 template，而在 runtime-only建立的项目中，参数是 render函数，这是他们最大的区别

组件渲染过程

其次，咱们再来了解一下，组件是怎么被渲染到页面当中去的，这对咱们理解上述问题起到关键性的做用

template --> ast --> render --> vDom --> 真实的Dom --> 页面

• ast：抽象语法树
• vDom：虚拟Dom

能够发现，template最终仍是会被渲染为 render函数，记住这个结论

runtime-only

• 咱们在使用 runtime-only 的时候，须要借助 webpack的loader工具，将 .vue 文件编译为JavaScript，由于是在编译阶段作的，因此它只包含运行时的 Vue.js 代码，因此代码体积会更轻量。

• 在将 .vue 文件编译为 JavaScript文件的过程当中会将组件中的 template 模版编译为 render 函数，因此咱们获得的是 render 函数的版本。因此运行的时候是不带编译的，编译是在离线的时候作的

• template 会经过 vue-template-compiler 转换为 render 函数

runtime-compiler

• 由于在Vue中，最终渲染都是经过 render函数，若是写 template 属性，则会编译为 render 函数，那么这个编译过程会发生在运行时，因此须要带有编译器的版本
• 编译过程会对性能有必定的损耗

结论

runtime-only： 将template在打包的时候，就已经编译为 render函数

runtime-compiler： 在运行的时候，才去编译 template

结果： 发布生产的时候，runtime-only 构建的项目代码体积更小，运行速度更快

推荐使用runtime-only构建项目