vue程序运行过程图

• parse: 将.vue组件中的template模板解析成ast语法树

• compile: 将ast语法树进行编译操作，编译成render函数

• render: 将render函数进行render渲染，渲染成vdom

• 最终将vdom展示在UI

runtimeonly && runtimecomparie区别

runtime-compiler： template——> ast ——> render ——> vdom ——> UI

runtime-only： render ——> vdom ——> UI

runtime-only比runtime-compiler代码体积小6k，性能也更好，因为没有template模板解析成ast语法树的步骤

runtime-only模式下没有解析template的源代码，所以比runtime-compiler模式体积小，那runtime-only模式下的vue文件中的template谁编译的？vue-template-compiler解析的

vue-loader是webpack的一个loader，用于使得webpack识别.vue文件，解析和转换 .vue 文件，提取出其中的逻辑代码 script、style、以及template，再分别把它们交给对应的 Loader 去处理

vue-template-compiler主要用作将vue文件中的template解析处理成render函数；并且vue-template-compiler的版本必须和vue的版本一致。

参考

coderwhy大神