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内部实现机制的同学来说，弄明白各种版本的差异是一个快速得到性能优化最佳实践的途径。