vue之独立构建和运行时构建

1.独立构建和运行时构建

2.vuejs运行时构建和独立构建的区别，分别适用于什么样的业务场景？

笔记：
Vue.js 的官方教程上是这么说的：
* 独立构建包括编译和支持 template 选项。 它也依赖于浏览器的接口的存在，所以你不能使用它来为服务器端渲染。
* 运行时构建不包括模板编译，不支持 template 选项。运行时构建，可以用 render 选项，但它只在单文件组件中起作用，因为单文件组件的模板是在构建时预编译到 render 函数中，运行时构建只有独立构建大小的 30%，只有 16Kb min+gzip 大小。

Vue.js 的运行过程实际上包含两步。第一步，编译器将字符串模板（template）编译为渲染函数（render），称之为编译过程；第二步，运行时实际调用编译的渲染函数，称之为运行过程。

由于 Vue.js 1.0 的编译过程需要依赖浏览器的 DOM，所以无法（或者说没有意义）将编译器和运行时分开。因此在 Vue.js 1.0 分发包中，编译器和运行时是打包在一起，都在浏览器端执行。

然而到了 Vue.js 2.0，为了支持服务端渲染（server-side rendering），编译器不能依赖于 DOM，所以必须将编译器和运行时分开。这就形成了独立构建（编译器 + 运行时）和运行时构建（仅运行时）。显而易见，运行时构建要小于独立构建。

在现代前端工程构建中，通常会使用 vue-loader 和 vueify 预编译模板。在这种情况下，只需要打包运行时，而不需要打包编译器，运行时构建即可满足所需。当然，如果你需要在前端使用 template 选项实时编译模板，那么还是需要使用独立构建将编译器发送到浏览器。

一、独立构建包含模板编译器，运行时构建不包含模板编译器。
二、模板编译器的作用就是将template选项编译成render函数，render函数是渲染的关键。
三、鉴于以上两点，使用运行时构建时，不能出现template选项，因为此时没有模板编译器。但是有一种情况除外：即webpack+vue-loader情况下单文件组件中出现template是可以的。
四、使用vue-cli生成项目时，会提醒使用哪种构建方式，npm包默认导出的是运行时构建，如果需要使用独立构建，需要在webpack中配置alias
五、目前暂时发现的两者的应用场景上的区别有：

需要注意Vue实例化时的方式，运行时构建方式下实例化Vue时，不要出现template属性
index.html中不要出现template或者是通过vue-router渲染的route-view
以上区别讨论的场景均为使用webpack+vue-loader单文件组件下，其他的区别暂时未发现。