浅析两种构建版本Vue的区别

本文主要介绍Vue两个不同构建版本的区别，以及编写代码的最佳实践。

作者：王二狗
座右铭：告诫自己，即使再累也不要忘记学习，成功没有捷径可走，只有一步接着一步走下去。

完整版和运行时版

打开Vue的官网，你会发现有Vue有两种不同的构建版本，Vue官方对两种不同构建版本的解释是这样子的：

• 完整版：同时包含编译器和运行时的版本（编译器：用来将模板字符串编译为JS渲染函数的代码）
• 运行时：用来创建Vue实例，渲染并处理虚拟DOM等的代码，基本上就是出去编译器的其它一切。

两种版本	UMD	CommonJS	基于构建工具使用	直接用于浏览器
完整版	vue.js	vue.common.js	vue.esm.js	vue.esm.browser.js
运行时版	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js

两种版本的区别

比较列	完整版	运行时版	评价
特点	有compiler	没有 compiler	完整版体积较大，其中仅compiler就占整个文件40%大小
视图	写在HTML中或者写在template选项中	写在 render 函数里，用 h 来创建标签	h 是尤雨溪写好传给 render 的
CDN引入	vue.js	vue.runtime.js	文件名不同，生成环境后缀为 .min.js
webpack 引入	需要配置 alias	默认使用此版本	尤雨溪所配置
@vue/cli 引入	需要额外配置	默认使用此版本	尤雨溪蒋豪群所配置

最佳实践：总是使用非完整版，然后配合vue-loader 和 vue 来进行使用。

思路：

• 保证用户体验，用户下载的 JS 文件体积更小，但只支持 h 函数。
• 保证开发体验，开发者可直接在 vue 文件里面写 html 标签，而不写 h 函数
• 脏活累活让 loader 做，vue-loader 把 vue 文件里面的 html 转为 h 函数。

你的点赞是我持续分享好东西的动力，欢迎点赞！