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

来杯卡布奇洛2023-07-30 23:24

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% 左右，前端性能更优