基于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数组插入一条记录的代码
Aug 30 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
Script的加载方法小结
Jan 12 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
js new Date()实例测试
Oct 31 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 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开启gzip页面压缩实例
2013/06/09 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
Numpy截取指定范围内的数据方法
2018/11/14 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
python分数表示方式和写法
2019/06/26 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
个人优缺点自我评价
2014/01/27 职场文书
我为自己代言广告词
2014/03/18 职场文书
合伙经营协议书范本
2014/09/13 职场文书
个性发展自我评价2015
2015/03/09 职场文书
检讨书格式
2015/05/07 职场文书
赡养老人协议书范本
2015/08/06 职场文书
数学备课组工作总结
2015/08/12 职场文书
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS
GPU服务器的多用户配置方法
2022/07/07 Servers