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 全局变量访问)。开发环境使用。
-
总结
-
若是自己写个小 demo 测试一下
- 用 vue.js 即可,方便阅读源码
-
若你是用 vue2 + webpack2 开发项目(vue-cli 采用的方式)
- 开发环境用 vue.esm.js
- 生产环境用 vue.runtime.esm.js,比完整版小 30% 左右,前端性能更优
-