浅谈Vue SSR中的Bundle的具有使用


Posted in Javascript onNovember 21, 2019

前言

写过Vue SSR的都知道,Vue通过提供server和client的webpack插件生成bundle josn,从而实现类似服务端的热更以及客户端资源的优化注入。那么这两个个bundle到底有什么神奇的呢?OK,话不多说,进入正题

客户端 vue-ssr-client-manifest.json

首先看看客户端的json,明显看到,里面借助webpack插件,把spa用到的文件进行了分类, publicPath 是公共路径,all 是所有的文件, initial 是入口文件依赖的js和css, async 是首屏不需要的异步的js,分析这些出来有什么用呢,主要是用来优化生成的html的资源注入,这个在后面会讲到

浅谈Vue SSR中的Bundle的具有使用

服务端 vue-ssr-server-bundle.json

然后我们再康康服务端生成的json, entry 是服务款入口的文件, files 是服务端依赖的文件列表, maps 是sourcemaps文件列表,这里暂时是空

浅谈Vue SSR中的Bundle的具有使用

如果把files展开,会看到里面是一堆文件列表,文件名跟key一样,然后value里面,对的,你没看错,是一段js,里面就是服务端渲染需要的代码,那道理我都懂,为什么有这段就可以实现服务端代码的热更以及sourcemap的定位呢

浅谈Vue SSR中的Bundle的具有使用

服务端的热更和sourcemap

带着这个问题,我去看了一下vue服务端的源码,左边框的三个文件就是实现这些神奇效果的关键之处了,其中右边框的entry、files就是我们上面服务端对应的json

浅谈Vue SSR中的Bundle的具有使用

接下来我们再去看看createBundleRunner里面这个方法,最关键是evaluateModule 里面调用getCompiledScript这个方法,其中evaluateModule 还会把执行的结果缓存到evaluatedFiles里面去

浅谈Vue SSR中的Bundle的具有使用

getCompiledScript里面通过调用vm.Scirpt把我们在entry里面的代码丢进vm创建的沙箱里面,同时也是要compiledScripts把生成的script片段缓存起来

浅谈Vue SSR中的Bundle的具有使用

vm.Script创建沙箱,我们还可以传入sandbox上下文,如果entry创建的沙箱依赖其他文件,还可以递归创建沙箱,通过这样做,我们就可以监听服务端文件变化的时候创建新的服务端json,再创建新的沙箱来执行,从而达到nodejs热更的效果

其中我们知道runInNewContext决定是否创建新的上下文,我们知道如果设置为false,则会使用runInThisContext创建沙箱,但是会容易污染全局global,如果我们使用runInNexContext来创建,同时传入我们预先传入的sandbox,就可以隔离上下文,但是这样有个坏处,就是创建新的上下文会有一定的资源消耗,

浅谈Vue SSR中的Bundle的具有使用

如果我们使用once来创建,就不会每个请求都创建新的隔离上下文,而是创建一个新的隔离上下文公用,这样就可以最大限度避免V8创建的消耗,可以看到,只有在没有runner的情况下才才会创建sandbox

浅谈Vue SSR中的Bundle的具有使用

至于sourcemap,通过使用mozilla这个 source-map npm库,在堆栈出错的时候,把错误的文件和函数进去,通过消费sourcemap来还原定位源文件的具体的位置和行数 可以说,脑洞真的很大,但这就完了吗,不止~

前面我们只讲了服务端的json,那客户端也生成了一份呢,那个有什么用呢?我们再次进入vue源码去挖掘, 很快就找到了答案

客户端的注入优化

浅谈Vue SSR中的Bundle的具有使用

我们知道服务端渲染会返回一个html,然后接下来客户端会走一次hydration,客户端需要的文件,例如js和css,我们需要在写在html里面,然后通过http去请求文件回来,不然怎么hydration啊

但这里有个维度,哪些是入口文件,哪些是异步文件,vue服务端自带client-plugin已经帮我们抽离出来了,OK,回到我们构建html,对于入口文件和css,我们会做preload的优化,对于异步的会做prefetch优化,同时对于入口的js还会做个script标签的defer加载提高并发数

浅谈Vue SSR中的Bundle的具有使用

总结

Vue SSR就是这么巧妙地利用两个webpack插件提取项目的关键信息生成bundle,从而达到服务器热更以及前端加载优化,真的可以说脑洞很大

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中字符串拼接需注意的问题
Jul 13 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
webpack常用构建优化策略小结
Nov 21 #Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 #Javascript
js实现课堂随机点名系统
Nov 21 #Javascript
JavaScript实现简单随机点名器
Nov 21 #Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 #Javascript
Vue实现按钮级权限方案
Nov 21 #Javascript
微信小程序实现星级评价
Nov 20 #Javascript
You might like
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
jquery 页面全选框实践代码
2010/04/02 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
jquery.validate使用详解
2016/06/02 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
基于Python闭包及其作用域详解
2017/08/28 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
selenium自动化测试入门实战
2020/12/21 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
管理信息系学生的自我评价
2014/01/11 职场文书
世界读书日的活动方案
2014/08/20 职场文书
旷工检讨书1000字
2015/01/01 职场文书
入党转正申请报告
2015/05/15 职场文书
2016年敬老月活动总结
2016/04/05 职场文书