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% 左右,前端性能更优
相关推荐
ZC跨境爬虫5 分钟前
跟着MDN学HTML_day_48:(Node接口)
前端·javascript·ui·html·音视频
kyriewen3 小时前
半夜三点线上崩了,AI替我背了锅——用AI排错,五分钟定位三年老bug
前端·javascript·ai编程
hexu_blog3 小时前
vue+java实现图片批量压缩
java·前端·vue.js
AI_paid_community4 小时前
98.5k Star!GitHub官方开源的这个工具,正在把"vibe coding"扫进历史的垃圾桶
javascript·claude
AI_paid_community5 小时前
用 Claude Code 写了一年代码,装了这 18 个 Skills 之后,我才知道自己一直在"氛围编程"
javascript·面试
parade岁月5 小时前
开源一个 Vue 3 Table:API 学 antdv、主题学 Nuxt UI
前端·vue.js
隔壁老王11115 小时前
浅谈JavaScript内存管理
javascript
吹牛不交税5 小时前
tree-transfer-vue3 前端插件安装问题解决(--legacy-peer-deps)(其他插件可考虑)适用
前端·javascript·vue.js
Appoint_x5 小时前
设计稿自己会说话:我用 Claude 给 Figma 做了个 AI 上下文插件
前端·javascript