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% 左右,前端性能更优
相关推荐
WayneX5 分钟前
Vue 3 + TypeScript + Vite 组件库搭建,自助式生成相应组件文档
前端·javascript·vue.js
贾铭6 分钟前
如何实现一个网页版的剪映(四)使用插件化思维创建pixi绘制画布(转场/滤镜)
前端·javascript
kgduu10 分钟前
js之xml处理
xml·前端·javascript
凌览15 分钟前
尤雨溪新公司官宣!Vite+ 正式开源,前端圈要变天了?
前端·javascript·后端
Highcharts.js20 分钟前
在 Highcharts 中实现 Marimekko可变宽度图|示例教程
javascript·highcharts·图表开发·可视化图表库·可变宽图
吃西瓜的年年1 小时前
前端面试题(vue)
前端·javascript·vue.js
wuhen_n2 小时前
结构化Prompt——让AI说“人话”
前端·vue.js·ai编程
En^_^Joy2 小时前
JavaScript入门指南:从零到精通
开发语言·javascript
前端小趴菜052 小时前
vue3-signature实现电子签名
前端·javascript·vue.js
卤蛋fg62 小时前
vue表格vxe-table如何获取拖拽后的行序号
vue.js