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% 左右,前端性能更优
相关推荐
web行路人19 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00120 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼92139 分钟前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂41 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
落魄小二2 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui
y5236482 小时前
Javascript监控元素样式变化
开发语言·javascript·ecmascript
fruge2 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia2 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js