Vue源码探究-构建版本的区别

Vue源码探究-构建版本的区别

基于第三方性能评估工具Benchmark的测评结果能够看出Vue 2.0版本在总体的性能上获得了大幅优化，即便与React和Angular最新版相比也相差无几。在提供给使用者的构建版本方面，也进行了针对性的细化，输出了多种不一样的版本，以便知足不一样需求的开发者使用更精细更适合本身的版本。

构建版本的比较

官方文档上展现的归纳图表（如下译自该文档）：

	UMD	CommonJS	ES Module
Full	vue.js	vue.common.js	vue.esm.js
Runtime-only	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js
Full (production)	vue.min.js
Runtime-only (production)	vue.runtime.min.js

解释一下上表列出的全部版本的内容区别和使用场景，具体的术语就不一一解释了，英语可得靠本身好好学习：

vue.js

• 内容：完整未压缩版，包括编译器和运行时两部分代码，支持通用模块引入和闭包返回Vue构造函数。
• 建议使用场景：须要编译模板的开发环境。
• 版本说明：因为未压缩，因此在生产环境下是不推荐使用的，这一版本比较适合学习源代码时使用。另外在Unpkg CDN上默认使用此完整版构建文件。

vue.min.js

• 内容： 完整压缩版，内容和输出彻底同上。
• 建议使用场景：须要编译模板的生产环境、浏览器script标签直接引用。
• 版本说明：在不想增长使用构建工具的学习曲线和复杂度时，直接使用script标签引入此版本能够无门槛直接进入Vue的学习和使用，而且支持通用模块加载。在生产环境建议使用压缩版能够减小30%的文件体积。

vue.common.js

• 内容： 完整未压缩CommonJS版，内容同上，区别在于输出的是CommonJS模块。
• 建议使用场景：需编译模板且使用老版本构建工具的开发环境。
• 版本说明：因为此版本未压缩是不建议直接使用在生产环境上的。若是在使用构建工具的状况下能够直接使用对应的运行时版本，因此该版本的使用场景应该比较有限。

vue.esm.js

• 内容： 完整未压缩ES Module版，内容同上，区别在于输出的是ES Module模块。
• 建议使用场景：需编译模板且使用新版构建工具的开发环境。
• 版本说明：同上。

vue.runtime.js

• 内容： 未压缩运行时版，支持通用模块引入和闭包返回Vue构造函数。
• 建议使用场景：不须要编译模板的开发环境。
• 版本说明：这一版本也不建议在生产环境使用，须要模块加载可用相应的压缩版。

vue.runtime.min.js

• 内容： 压缩运行时版，内容和输出彻底同上。
• 建议使用场景：不须要编译模板的生产环境。
• 版本说明：若是不须要编译模板，可使用这个版本，支持通用模块加载，也能够用script标签引入直接在浏览器中使用，是体积最小的版本。

vue.runtime.common.js

• 内容： 未压缩版CommonJs构建版，内容同上，区别在于输出CommonJS模块。
• 建议使用场景：不需编译模板且使用老版本构建工具时。
• 版本说明：使用browserify或webpack1时默认使用该版本。

vue.runtime.esm.js

• 内容： 未压缩版ES module构建版，内容同上，区别在于输出ES module模块。
• 建议使用场景：不需编译模板且使用新版构建工具时.
• 版本说明：使用webpack2和rollup时默认使用该版本，在使用最新的vue-cli搭建的webpack脚手架时就是使用了这个版本。

另外在仓库里发现的一个叫vue.esm.browser.js的文件，仔细看了一下与vue.esm.js相比用的全是ES6的语法，但图表里没有提到此文件是什么状况下使用，并且是稍前几回构建出的版本，我的猜测多是没有什么特别的用处，只是没有删掉而已，欢迎指正。

完整版 vs. 运行时版

完整版的使用场景是须要即时编译模板的状况，什么是即时编译模板？

在程序运行中进行模板编译。这一过程如同动态加载，当把模板字符串做为配置选项的template属性传入Vue构造函数后再执行渲染进程；或使用DOM已有元素做为模板在运行时加载并编译，这些都是在运行中进行模板编译的实例。因而可知通常使用了type="text/x-template"的script标签包含的模板就是在代码运行中进行加载编译的，因此此时须要完整版中的编译器来执行把模板转化成渲染函数的过程，不然经过vue进行构造的内容是没法显示的。在开发时若是使用了运行时版，Vue也会在Console中给出提示。

相反，若是使用构建工具开发，在程序运行以前就先执行了模板的编译过程，.vue单文件组件会被编译转换成javascript代码，在浏览器中能够直接运行，因此此时只需使用运行时版本就能够支持Vue的正常运行，这样Vue的体积更小，有助于提高加载速度，因此在熟悉了Vue以后比较推荐配合使用构建工具来进行开发。

开发模式 vs. 生产模式

官方文档表示在通用模块版本中使用了开发和生产模式的硬编码，未压缩版的用于开发模式，压缩版的用于生产模式。

在使用构建工具时，建议使用与构建工具版本相应的未压缩版，这样在开发时参考错误信息报告和定位调试是很是便利的，而在构建打包到生产环境时，配套插件会负责压缩代码。

基于网页性能优化的原则，建议在生产环境中都要使用压缩版。只有在开发时才须要未压缩版中的错误提示信息方便定位错误及调整。

---

在2.0版本发布之后，Vue开始提供不一样构建版本，大体了解以后发如今不一样开发场景下选择适当的版本有助于减小开发时每次打包的速度，而且了解各类版本的不一样后也能选择适合的生产版本提高应用的总体性能。在网上找了好久才发现原来官方Github上有比较详细的说明文档解释各类版本的区别，不过对于具体的使用场景没有特别突出的说明，最后仍是本身花了些时间去比较和总结，算是又把心中的一块小石头给抹掉。我想对于目前跟我同样还不太了解Vue内部实现机制的同窗来讲，弄明白各类版本的差别是一个快速获得性能优化最佳实践的途径。