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

• 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 采用的方式）

     • 开发环境用 vue.esm.js
     • 生产环境用 vue.runtime.esm.js，比完整版小 30% 左右，前端性能更优