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

前言

写过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-server-bundle.json

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

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

服务端的热更和sourcemap

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

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

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

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

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

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

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

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

客户端的注入优化

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

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

总结

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

最新评论