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% 左右,前端性能更优
相关推荐
lichenyang45312 分钟前
从零开始构建 React 文档系统 - 完整实现指南
前端·javascript·react.js
比特森林探险记13 分钟前
Hooks、状态管理
前端·javascript·react.js
比特森林探险记1 小时前
组件通信 与 ⏳ 生命周期
前端·javascript·vue.js
海绵宝龙1 小时前
Vue中nextTick
前端·javascript·vue.js
H_z_q24012 小时前
Web前端制作一个评论发布案例
前端·javascript·css
摘星编程2 小时前
React Native + OpenHarmony:useId唯一标识生成
javascript·react native·react.js
2603_949462102 小时前
Flutter for OpenHarmony社团管理App实战:消息中心实现
android·javascript·flutter
qq_12498707533 小时前
基于springboot的会议室预订系统设计与实现(源码+论文+部署+安装)
java·vue.js·spring boot·后端·信息可视化·毕业设计·计算机毕业设计
萧曵 丶3 小时前
JavaScript 函数各种写法和场景
开发语言·javascript·ecmascript
Yolanda944 小时前
【项目经验】钉钉免密登录实现
前端·javascript·钉钉