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

这篇具有很好参考价值的文章主要介绍了vue 文件扩展名中 esm 、common 、global 以及 mini 、 dev 、prod 、runtime 的含义。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue 文件扩展名中 esm 、common 、global 以及 mini 、 dev 、prod 、runtime 的含义,Vue,vue.js,javascript,ecmascript

vue.js

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

这个版本视图可以写在html 或者 template 里：
```
// template：需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})
```
vue.mini.js

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

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

这个版本视图写在 render 函数里，用 h 来创建标签。（h是开发者写好后传给render的）：
```
// 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 采用的方式）文章来源地址https://www.toymoban.com/news/detail-611163.html
  - 开发环境用 vue.esm.js
  - 生产环境用 vue.runtime.esm.js，比完整版小 30% 左右，前端性能更优