基于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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
通过示例彻底搞懂js闭包
Aug 10 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
详解vue-cli 脚手架 安装
Apr 16 Javascript
浅谈vue.use()方法从源码到使用
May 12 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
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
通过url查找a元素并点击
2014/04/09 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
python字符串查找函数的用法详解
2019/07/08 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
python修改文件内容的3种方法详解
2019/11/15 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
电气自动化大学生求职信
2013/10/16 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
办公室岗位职责
2015/02/04 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android