我们使用 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(virdual-dom )
可以发现,template最终还是会被渲染为 render函数
即无论通过何种方式创建,最终都是渲染为render函数来渲染页面的。这点我们从vue源码的入口文件(src\platforms\web\entry-runtime-with-compiler.js
)中也能得出此结论,源码如下
// 当render不存在,则判断template,不存在再判断el
if (!options.render) {
let template = options.template
// 编译过程
if (template) {
if (typeof template === 'string') {
if (template.charAt(0) === '#') {
template = idToTemplate(template)
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && !template) {
warn(
`Template element not found or is empty: ${options.template}`,
this
)
}
}
} else if (template.nodeType) {
template = template.innerHTML
} else {
if (process.env.NODE_ENV !== 'production') {
warn('invalid template option:' + template, this)
}
return this
}
} else if (el) {
template = getOuterHTML(el)
}
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构建项目
开发阶段推荐使用runtime-compiler构建项目