基于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操作cookie的函数代码
Oct 03 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
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的十大要点(上)
2009/02/04 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
利用Python命令行传递实例化对象的方法
2016/11/02 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
Python 函数list&read&seek详解
2019/08/28 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
GWT的应用有哪两种部署模式
2012/12/21 面试题
四风存在的原因分析
2014/02/11 职场文书
火锅店营销方案
2014/02/26 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
党风廉设责任书
2014/04/16 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
安全口号大全
2014/06/21 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
召开会议通知范文
2015/04/15 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
黑白记忆观后感
2015/06/18 职场文书
Django+Celery实现定时任务的示例
2021/06/23 Python