基于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 confirm选择判断
Oct 18 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
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
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
js prototype截取字符串函数
2010/04/01 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python如何实现文本转语音
2016/08/08 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
Python的in,is和id函数代码实例
2020/04/18 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
简述python&pytorch 随机种子的实现
2020/10/07 Python
办公室主任岗位职责
2013/11/08 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
人事专员的职责
2014/02/26 职场文书
白酒营销策划方案
2014/08/17 职场文书
党章培训心得体会
2014/09/04 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
小学主题班会教案
2015/08/17 职场文书
初中班主任心得体会
2016/01/07 职场文书
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js