Vue 运行时+编译器 vs. 仅运行时

在vue npm包的 dist/ 目录有很多不同的Vue.js构建版本。

vue.global.js - 包含编译器和运行时的完整版（约 520KB）
vue.global.prod.js - 包含编译器和运行时的压缩后完整版（约 105KB）
vue.runtime.global.js - 只包含运行时（约 356KB）
vue.runtime.global.prod.js - 只包含运行时的压缩版（约 68KB）

如果要在客户端上编译模板（即：将字符串传递给template选项，或者使用元素的DOM内HTML作为模板挂载到元素），则需要编译器，因此需要完整的构建版本：

html

<!-- index.html -->

<div id="app">
  <h1>{{hi}}</h1>
</div>

javascript

// main.js
// 以 vue3 写法为例

// 需要编译器
// 会直接替换 app 元素的内容
Vue.createApp({
  template: '<div>{{ hi }}</div>',
  data() {
    return {
      hi: "hi"
    };
  }
}).mount('#app')

// 需要编译器
// 相当于使用 app 元素的 DOM 内 HTML 作为模板
Vue.createApp({
  data() {
    return {
      hi: "hi"
    };
  }
}).mount('#app')

如果使用上面两种写法，且使用了vue的非完整版（即runtime版本），那么vue会提示错误需要使用完整版：

[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Use "vue.global.js" instead.

javascript

// 不需要编译器
Vue.createApp({
  render() {
    return Vue.h('div', {}, this.hi)
  },
  data() {
    return {
      hi: "hi"
    };
  }
}).mount('#app')

如果使用上面这种写法，则不需要包含编译器即可运行。

所以实际上编译器Compiler的作用就是将HTML字符串内容编译成vue能够解析的虚拟DOM结构，即Vue.h方法：

javascript

Vue.h('div', {}, this.hi)

包含编译器版本的体积比runtime版本大了约40%，所以一般我们在工程化的项目中使用的都是runtime版本，来减少项目体积。而编译的工作则交给vue-loader，在项目build阶段进行预编译。

Vue 运行时+编译器 vs. 仅运行时 #

Vue 运行时+编译器 vs. 仅运行时