基于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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
小程序表单认证布局及验证详解
Jun 19 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中数组定义的几种方法
2013/09/01 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
Python中存取文件的4种不同操作
2018/07/02 Python
django配置app中的静态文件步骤
2020/03/27 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
银行纠风工作实施方案
2014/06/08 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
单位未婚证明范本
2014/11/25 职场文书
感谢信格式范文
2015/01/22 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
预备党员个人总结
2015/02/14 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
tree shaking对打包体积优化及作用
2022/07/07 Java/Android