浅谈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 hasOwnProperty 方法 & in 关键字
Nov 26 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 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 什么是PEAR?
2009/03/19 PHP
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
移动节点的jquery代码
2014/01/13 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
python 的列表遍历删除实现代码
2020/04/12 Python
python实现用户登录系统
2016/05/21 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
Python实现像awk一样分割字符串
2020/09/15 Python
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
python程序的组织结构详解
2021/12/06 Python