基于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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
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
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
python连接mysql调用存储过程示例
2014/03/05 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
自我推荐书
2013/12/04 职场文书
个人求职信范文
2014/05/24 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
妈妈别哭观后感
2015/06/08 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
Android studio 简单计算器的编写
2022/05/20 Java/Android