vue的完整版和运行时版的区别

摘要:打开Vue的官网,你会发现有Vue有两种不同的构建版本,Vue官方对两种不同构建版本的解释是这样子的:完整版:同时包含编译器和运行时的版本

完整版和运行时版

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

  • 完整版:同时包含编译器和运行时的版本(编译器:用来将模板字符串编译为JS渲染函数的代码)

  • 运行时:用来创建Vue实例,渲染并处理虚拟DOM等的代码,基本上就是出去编译器的其它一切。

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

两种版本的区别

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

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

思路

  • 保证用户体验,用户下载的 JS 文件体积更小,但只支持 h 函数。

  • 保证开发体验,开发者可直接在 vue 文件里面写 html 标签,而不写 h 函数

  • 脏活累活让 loader 做,vue-loader 把 vue 文件里面的 html 转为 h 函数。


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_9351