Runtime-Compiler和Runtime-Only的区别

我们使用脚手架vuecli初始化一个项目时，会让你选择是使用runtime-compiler和runtime-only.

这两者的我们发现他创建的main.js不一样。

一.runtime-compiler

• vue运行过程

  • template --> ast --> render --> vDom --> UI

    • ast:抽象语法树

    • vDom:虚拟Dom

  template最终还是会被渲染为render函数，编译过程中对性能有一定的损耗

二.runtime-only

• vue运行过程

  • render --> vDom --> UI

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

• 在将 .vue 文件编译为 JavaScript文件的过程中会将组件中的 template 模版编译为 render 函数，所以我们得到的是 render 函数的版本。所以运行的时候是不带编译的，编译是在离线的时候做的

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

三.vue文件封装

• 一个组件以一个js对象的形式进行组织和使用的时候非常不方便

  • 一方面编写template的时候非常的麻烦
  • 另一方面如果有样式，不知写在哪里合适

• 所以出现的一种全新的方式来组织一个vue的组件，但是这种方式的文件不能被正确的加载

  • 这种特殊的文件和特殊的格式，是需要有人来帮助我们
  • vue-loader和vue-template-copmpiler

• 安装vue-loader和vue-template-copmpiler

  npm isntall vue-loader vue-template-copmpiler --save-dev
  

  然后修改webpack.config.js的配置文件

结论

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

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

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