基于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 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
JQuery 浮动导航栏实现代码
Aug 27 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
fetch 使用及如何接收JS传值
Nov 11 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
js动态生成表格(节点操作)
Jan 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
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
很好用的js日历算法详细代码
2013/03/07 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
python解析xml文件实例分析
2015/05/27 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
Django添加feeds功能的示例
2018/08/07 Python
浅析python的Lambda表达式
2019/02/27 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
python使用配置文件过程详解
2019/12/28 Python
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
《两只鸟蛋》教学反思
2014/02/10 职场文书
房屋租赁意向书
2014/04/01 职场文书
老公保证书怎么写
2015/02/26 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
初中语文教师研修日志
2015/11/13 职场文书
初中英语教学反思范文
2016/02/15 职场文书
导游词之山海关
2019/12/10 职场文书