基于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面向对象编程(一) 实例代码
Jun 25 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
JS实现容器模块左右拖动效果
Jan 14 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 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
PHP中strtotime函数使用方法详解
2011/11/27 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
python 重定向获取真实url的方法
2018/05/11 Python
Python中itertools的用法详解
2020/02/07 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
Laravel中Kafka的使用详解
2021/03/24 PHP
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
2015年技术员工作总结
2015/04/10 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
python字符串的多行输出的实例详解
2021/06/08 Python
python 字典和列表嵌套用法详解
2021/06/29 Python