Vue独立构建与运行时构建

看了Vue 2.1.7版本的源码, 发现在打包Vue文件的时候, 可以通过不同的配置项打包不同的版本.

clipboard.png

根据package.json里面的命令可以看到不同的运行方式.
其中最主要的区别就是在入口文件

clipboard.png
是web-runtime-with-compiler.js 还是 web-runtime.js.
这里就是运行时构建与 独立 构建的区别所在

查看里面的源码可以发现

Web-runtime-with-compiler.js 中重载了 web-runtime.js 的$mount()方法, 主要区别在与

clipboard.png
对options.template 选项进行了解析 => 成为render 函数, 这个步骤可以理解为编译过程
而运行时构建 对于用webpack + vue-loader 生成的项目来说, 是在预编译阶段就进行了编译, 所以对于vue-cli生成的项目默认是使用运行时构建

由于 Vue.js 1.0 的编译过程需要依赖浏览器的 DOM,所以无法(或者说没有意义)将编译器和运行时分开。因此在 Vue.js 1.0 分发包中,编译器和运行时是打包在一起,都在浏览器端执行。
然而到了 Vue.js 2.0,为了支持服务端渲染(server-side rendering),编译器不能依赖于 DOM,所以必须将编译器和运行时分开。这就形成了独立构建(编译器 + 运行时)和运行时构建(仅运行时)。显而易见,运行时构建要小于独立构建。

http://hcysun.me/2017/03/03/V...
http://blog.csdn.net/zengyong...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值