基于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 学习历程和心得分享
Dec 12 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
js+css3实现简单时钟特效
Sep 13 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
PHP微商城开源代码实例
2019/03/27 PHP
Array.prototype.slice 使用扩展
2010/06/09 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
Vue 实现登录界面验证码功能
2020/01/03 Javascript
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
python实现简单名片管理系统
2018/11/30 Python
python manage.py runserver流程解析
2019/11/08 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
社保委托书怎么写
2014/08/02 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
唐山大地震的观后感
2015/06/05 职场文书
社会实践心得体会范文
2016/01/14 职场文书
八年级历史教学反思
2016/02/19 职场文书
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python