基于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 相关文章推荐
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
详解如何在Canvas中添加事件的方法
Apr 17 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 Javascript
JavaScript的function函数详细介绍
Nov 20 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应用技巧
2008/03/27 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
php如何获取Http请求
2020/04/30 PHP
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
jquery移动节点实例
2015/01/14 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
Python做简单的字符串匹配详解
2017/03/21 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
Python3计算三角形的面积代码
2017/12/18 Python
python3 mmh3安装及使用方法
2019/10/09 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
JAVA和C++的区别
2013/10/06 面试题
总经理秘书工作职责
2013/12/26 职场文书
大学生职业生涯规划范文
2013/12/31 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
学校运动会广播稿
2014/10/11 职场文书
2015年教师国培感言
2015/08/01 职场文书
技术入股协议书
2016/03/22 职场文书
vue实现列表垂直无缝滚动
2022/04/08 Vue.js