vue 文件扩展名中 esm 、common 、global 以及 mini 、 dev 、prod 、runtime 的含义

vue 文件扩展名中 esm 、common 、global 以及 mini 、 dev 、prod 、runtime 的含义

  • vue.js

    直接用在 script 标签中的完整版本(同时包含编译器 compiler 和运行时 runtime),可以看到源码,适用于开发环境。

    这个版本视图可以写在html 或者 template 里:

    js 复制代码
    // template:需要编译器
    new Vue({
      template: '<div>{{ hi }}</div>'
    })
  • vue.mini.js

    直接用在 script 标签中的完整版本(同时包含编译器 compiler 和运行时 runtime),但是经过压缩丑化处理,取消了注释和警告,体积较小,适合在生产环境下使用。

  • vue.runtime.js

    vue 运行版。相比完整版体积要小大约 30%,用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

    这个版本视图写在 render 函数里,用 h 来创建标签。(h是开发者写好后传给render的):

    js 复制代码
    // render:不需要编译器
    new Vue({
      render (h) {
        return h('div', this.hi)
      }
    })
  • vue.runtime.mini.js

    vue 运行版的压缩版本,生产环境使用。

  • vue.esm.js

    预编译调试时,支持通过原生 EcmaScript Module 导入访问(webpack2 及之后版本都使用这个)。开发环境使用。

  • vue.esm.mini.js

    预编译调试时,支持通过原生 EcmaScript Module导入访问(webpack2 及之后版本都使用这个)。生产环境使用。

  • vue.common.dev.js

    预编译调试时,支持通过 CommnJS 规范导入访问(webpack1 版本都使用这个)。开发环境使用。

  • vue.common.prod.js

    预编译调试时,支持通过原生 CommnJS 规范访问(webpack1 版本都使用这个)。生产环境使用。

  • vue.global.js

    全局变量版本(通过 Vue 全局变量访问)。开发环境使用。

  • 总结

    1. 若是自己写个小 demo 测试一下

      • 用 vue.js 即可,方便阅读源码
    2. 若你是用 vue2 + webpack2 开发项目(vue-cli 采用的方式)

      • 开发环境用 vue.esm.js
      • 生产环境用 vue.runtime.esm.js,比完整版小 30% 左右,前端性能更优
相关推荐
慕斯-ing4 小时前
Vue指令v-on
前端·vue.js·经验分享
YuLiu123218 小时前
Vue3学习笔记-Vue开发前准备-1
vue.js·笔记·学习
三月七(爱看动漫的程序员)9 小时前
模型/O功能之提示词模板
java·前端·javascript·人工智能·语言模型·langchain·prompt
LCG元9 小时前
Vue.js组件开发-实现左侧浮动菜单跟随页面滚动
前端·javascript·vue.js
轻口味12 小时前
Vue.js 异步、延迟组件加载
vue.js
小郑T_T12 小时前
浏览器模块化难题
前端·javascript
微光守望者13 小时前
Node.js常用知识
前端·javascript·node.js
计算机-秋大田14 小时前
基于微信小程序的实习记录系统设计与实现(LW+源码+讲解)
vue.js·spring boot·后端·微信小程序·小程序·课程设计
濡湿小镰刀14 小时前
在谷歌插件中拦截并修改请求参数
javascript
慕斯-ing14 小时前
Vue指令v-html
前端·vue.js·经验分享