基于Vue2的独立构建与运行时构建的差别(详解)


Posted in Javascript onDecember 06, 2017

其实这个问题在你使用vue-cli构建项目的时候是不会出现的,因为你在创建项目的构建过程中已经让你勾选了,然后会写入webpack.config.js中。

基于Vue2的独立构建与运行时构建的差别(详解)

这就在这,会让你选择Vue的构建方式。

基于Vue2的独立构建与运行时构建的差别(详解)

如果你勾选Runtime + Compiler就会出现如上的配置。

其实这里涉及到一个概念:

独立构建:含义是,拥有完整的模版编译功能运行时调用功能

运行时构建:含义是,只拥有完整的运行时调用功能

基于Vue2的独立构建与运行时构建的差别(详解)

为什么会有这种区分呢?

第一,因为Vue使用/运行过程分为两个阶段,第一阶段是将模版进行编译(如单个vue文件中的template)为渲染函数(render),第二阶段是将实际函数的调用阶段。

第二,因为自Vue2.x开始,Vue开始支持SSR(服务端渲染),而服务端是没有DOM这些概念的。所以导致了从Vue2.x后会有分包的问题。

下面是官方话术:

独立构建包括编译和支持 template 选项。 它也依赖于浏览器的接口的存在,所以你不能使用它来为服务器端渲染。

运行时构建不包括模板编译,不支持 template 选项。运行时构建,可以用 render 选项,但它只在单文件组件中起作用,因为单文件组件的模板是在构建时预编译到 render 函数中,运行时构建只有独立构建大小的 30%,只有 16Kb min+gzip 大小。

所以两者最大的区别也就出来了

独立构建包括编译和支持 template 选项

运行时构建不包括模板编译,不支持 template 选项

以上这篇基于Vue2的独立构建与运行时构建的差别(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 面向对象 继承
May 13 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
JS高级运动实例分析
Dec 20 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
js 两数组去除重复数值的实例
Dec 06 #Javascript
js 提取某()特殊字符串长度的实例
Dec 06 #Javascript
React-Router如何进行页面权限管理的方法
Dec 06 #Javascript
移动前端图片压缩上传的实例
Dec 06 #Javascript
详细分析JS函数去抖和节流
Dec 05 #Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 #Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 #Javascript
You might like
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
vue超时计算的组件实例代码
2018/07/09 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
一步步教你用Python实现2048小游戏
2017/01/19 Python
破解安装Pycharm的方法
2018/10/19 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
python实现邮件发送功能
2019/08/10 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
利用python汇总统计多张Excel
2020/09/22 Python
优秀信贷员先进事迹
2014/01/31 职场文书
运动会方阵口号
2014/06/07 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
红歌会主持词
2015/07/02 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
golang中的并发和并行
2021/05/08 Golang
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis