【Vue】完整版 Vs 非完整版

144 阅读2分钟

【Vue】深入了解Vue完整版与非完整版

目录

  • 术语
  • 完整版Vue
  • 非完整版Vue
  • 深入理解两个版本的区别
  • 引用出错的结果

一、术语

编译器:用来将模板字符串编译成为JavaScript渲染函数的代码

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


二、完整版

  • 完整版体积大(假设它占比100K),功能强,有编译器。

  • vue.js

    包含注释信息,全部的代码


  • vue.min.js

    不包含注释信息,只是代码



三、非完整版

  • 非完整版体积小(相比于完整版为70K),功能弱,没有编译器。

  • vue.runtime.js

    包含注释信息,全部的代码


  • vue.runtime.min.js

    不包含注释信息,只是代码



四、深入理解两个版本的区别

Vue完整版Vue非完整版评价
特点有compiler没有compilercompiler占40%体积
视图写在HTML里,或者卸载template选项里写在render函数里用h来创建标签h是vue作者(尤雨溪)写好传给render的
cdn引入vue.jsvue.runtime.js文件不同,生产环境后缀为.min.js
webpack引入需要配置alias默认使用此版尤雨溪配置
@vue/cli需要额外配置默认使用此版尤雨溪、蒋豪群配置
  • 最佳实践:总是使用非完整版,然后配合vue-loader和vue文件。
  • 思路:
    1. 保证用户体验,用户下载的JS文件体积更小,但支持h函数
    2. 保证开发体验,开发者可直接在vue文件里写HTML标签,而不写h函数。
    3. 脏活让loader做,vue-loader把vue文件里的HTML转为h函数。

五、引用出错的后果

  • vue.js错用成vue.rentime.js

    无法将HTML编译成视图

  • vue.runtime.js错用成vue.js

    代码体积变大而已,因为vue.js有编译HTML的功能

更多详情信息