基于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 学习笔记(一)
Oct 13 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
js日期、星座的级联显示代码
Jan 23 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
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
关于PHP5 Session生命周期介绍
2010/03/02 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
php简单压缩css样式示例
2016/09/22 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
Node中使用ES6语法的基础教程
2018/01/05 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
10个顶级Python实用库推荐
2021/03/04 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
大学生文员专业个人求职信范文
2014/01/05 职场文书
宿舍打麻将检讨书
2014/01/24 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书