浅谈Vue SSR中的Bundle的具有使用
前言
写过VueSSR的都知道，Vue通过提供server和client的webpack插件生成bundlejosn，从而实现类似服务端的热更以及客户端资源的优化注入。那么这两个个bundle到底有什么神奇的呢？OK，话不多说，进入正题
客户端vue-ssr-client-manifest.json
首先看看客户端的json，明显看到，里面借助webpack插件，把spa用到的文件进行了分类，publicPath是公共路径,all是所有的文件，initial是入口文件依赖的js和css，async是首屏不需要的异步的js，分析这些出来有什么用呢，主要是用来优化生成的html的资源注入，这个在后面会讲到
然后我们再康康服务端生成的json，entry是服务款入口的文件，files是服务端依赖的文件列表，maps是sourcemaps文件列表，这里暂时是空
如果把files展开，会看到里面是一堆文件列表，文件名跟key一样，然后value里面，对的，你没看错，是一段js，里面就是服务端渲染需要的代码，那道理我都懂，为什么有这段就可以实现服务端代码的热更以及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-mapnpm库，在堆栈出错的时候，把错误的文件和函数进去，通过消费sourcemap来还原定位源文件的具体的位置和行数可以说，脑洞真的很大，但这就完了吗，不止~
前面我们只讲了服务端的json，那客户端也生成了一份呢，那个有什么用呢？我们再次进入vue源码去挖掘，很快就找到了答案
客户端的注入优化
我们知道服务端渲染会返回一个html，然后接下来客户端会走一次hydration，客户端需要的文件，例如js和css，我们需要在写在html里面，然后通过http去请求文件回来，不然怎么hydration啊
但这里有个维度，哪些是入口文件，哪些是异步文件，vue服务端自带client-plugin已经帮我们抽离出来了，OK，回到我们构建html，对于入口文件和css，我们会做preload的优化，对于异步的会做prefetch优化，同时对于入口的js还会做个script标签的defer加载提高并发数
总结
VueSSR就是这么巧妙地利用两个webpack插件提取项目的关键信息生成bundle，从而达到服务器热更以及前端加载优化，真的可以说脑洞很大
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。