温馨提示×

Bundle怎么在Vue SSR中使用

发布时间:2021-02-23 17:37:25 来源:亿速云 阅读:91 作者:Leah 栏目:web开发

这期内容当中小编将会给大家带来有关Bundle怎么在Vue SSR中使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

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

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

Bundle怎么在Vue SSR中使用

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

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

Bundle怎么在Vue SSR中使用

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

Bundle怎么在Vue SSR中使用

服务端的热更和sourcemap

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

Bundle怎么在Vue SSR中使用

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

Bundle怎么在Vue SSR中使用

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

Bundle怎么在Vue SSR中使用

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

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

Bundle怎么在Vue SSR中使用

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

Bundle怎么在Vue SSR中使用

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

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

客户端的注入优化

Bundle怎么在Vue SSR中使用

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

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

Bundle怎么在Vue SSR中使用

上述就是小编为大家分享的Bundle怎么在Vue SSR中使用了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

免费拨打  400 100 2938 免费拨打 400 100 2938
24小时售后技术支持 24小时售后技术支持
返回顶部 返回顶部