vue浅谈编译打包后的文件

522 阅读1分钟

本文仅作vue某些介绍,不足之处请指出。

一、关于vue编译后的js脚本

vue.common.dev.js CommonJS模式,且开发者模式的脚本,vue编译+运行

vue.common.prod.js CommonJS模式,且生产模式(压缩后)的脚本,vue编译+运行

vue.esm.js ESM模式,即导出ES模块,vue编译+运行

vue.js UMD模式,即AMD+CommonJS模式都有,vue编译+运行

vue.min.js UMD压缩模式,即vue.js的压缩版本,适用于生产

vue.runtime.common.dev.js 相对于vue.common.dev.js,只含有运行时,没有编译,即没有vue的渲染代码

vue.runtime.common.prod.js vue.runtime.common.dev.js的压缩模式

vue.runtime.esm.js 相对于vue.esm.js,只含有运行时

vue.runtime.js 仅含有运行时的UMD模式

从vue组件渲染到页面,大致会有这么几个过程。 1、vue组件解析成AST 2、如果需要优化,从而对AST进行优化,主要是为了提升脚本的加载速度 3、把AST生成渲染函数 4、渲染函数生成虚拟DOM,即VNode 5、VNode会通过pacthVNode算法,增 删 改虚拟DOM 6、最后生成真正的html元素

vue的编译指的是生成渲染函数的过程。 所以以上没有编译过程脚本,使用的时候应该注意需要直接写渲染函数,而不能写模板了。否则可能会报如下错误:

image.png