浅谈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 相关文章推荐
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
python 安装移动复制第三方库操作
2020/07/13 Python
python打包多类型文件的操作方法
2020/09/21 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
面试后的感谢信范文
2014/02/01 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
追悼会悼词大全
2015/06/23 职场文书
新学期感想
2015/08/10 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB