基于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(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
JS验证码实现代码
Sep 14 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
获取layer.open弹出层的返回值方法
Aug 20 Javascript
加快Vue项目的开发速度的方法
Dec 12 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缓存类分享     php缓存机制
2014/01/22 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
Python 多线程抓取图片效率对比
2016/02/27 Python
Python决策树分类算法学习
2017/12/22 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
《新型玻璃》教学反思
2014/04/13 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS