前言

寫過(guò)Vue SSR的都知道，Vue通過(guò)提供server和client的webpack插件生成bundle josn，從而實(shí)現(xiàn)類似服務(wù)端的熱更以及客戶端資源的優(yōu)化注入。那么這兩個(gè)個(gè)bundle到底有什么神奇的呢？OK，話不多說(shuō)，進(jìn)入正題

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

首先看看客戶端的json，明顯看到，里面借助webpack插件，把spa用到的文件進(jìn)行了分類， publicPath 是公共路徑,all 是所有的文件， initial 是入口文件依賴的js和css， async 是首屏不需要的異步的js，分析這些出來(lái)有什么用呢，主要是用來(lái)優(yōu)化生成的html的資源注入，這個(gè)在后面會(huì)講到

服務(wù)端 vue-ssr-server-bundle.json

然后我們?cè)倏悼捣?wù)端生成的json， entry 是服務(wù)款入口的文件， files 是服務(wù)端依賴的文件列表， maps 是sourcemaps文件列表，這里暫時(shí)是空

如果把files展開(kāi)，會(huì)看到里面是一堆文件列表，文件名跟key一樣，然后value里面，對(duì)的，你沒(méi)看錯(cuò)，是一段js，里面就是服務(wù)端渲染需要的代碼，那道理我都懂，為什么有這段就可以實(shí)現(xiàn)服務(wù)端代碼的熱更以及sourcemap的定位呢

服務(wù)端的熱更和sourcemap

帶著這個(gè)問(wèn)題，我去看了一下vue服務(wù)端的源碼，左邊框的三個(gè)文件就是實(shí)現(xiàn)這些神奇效果的關(guān)鍵之處了，其中右邊框的entry、files就是我們上面服務(wù)端對(duì)應(yīng)的json

接下來(lái)我們?cè)偃タ纯碿reateBundleRunner里面這個(gè)方法，最關(guān)鍵是evaluateModule 里面調(diào)用getCompiledScript這個(gè)方法，其中evaluateModule 還會(huì)把執(zhí)行的結(jié)果緩存到evaluatedFiles里面去

getCompiledScript里面通過(guò)調(diào)用vm.Scirpt把我們?cè)趀ntry里面的代碼丟進(jìn)vm創(chuàng)建的沙箱里面，同時(shí)也是要compiledScripts把生成的script片段緩存起來(lái)

vm.Script創(chuàng)建沙箱，我們還可以傳入sandbox上下文，如果entry創(chuàng)建的沙箱依賴其他文件，還可以遞歸創(chuàng)建沙箱，通過(guò)這樣做，我們就可以監(jiān)聽(tīng)服務(wù)端文件變化的時(shí)候創(chuàng)建新的服務(wù)端json，再創(chuàng)建新的沙箱來(lái)執(zhí)行，從而達(dá)到nodejs熱更的效果

其中我們知道runInNewContext決定是否創(chuàng)建新的上下文，我們知道如果設(shè)置為false，則會(huì)使用runInThisContext創(chuàng)建沙箱，但是會(huì)容易污染全局global，如果我們使用runInNexContext來(lái)創(chuàng)建，同時(shí)傳入我們預(yù)先傳入的sandbox，就可以隔離上下文，但是這樣有個(gè)壞處，就是創(chuàng)建新的上下文會(huì)有一定的資源消耗，

如果我們使用once來(lái)創(chuàng)建，就不會(huì)每個(gè)請(qǐng)求都創(chuàng)建新的隔離上下文，而是創(chuàng)建一個(gè)新的隔離上下文公用，這樣就可以最大限度避免V8創(chuàng)建的消耗，可以看到，只有在沒(méi)有runner的情況下才才會(huì)創(chuàng)建sandbox

至于sourcemap，通過(guò)使用mozilla這個(gè) source-map npm庫(kù)，在堆棧出錯(cuò)的時(shí)候，把錯(cuò)誤的文件和函數(shù)進(jìn)去，通過(guò)消費(fèi)sourcemap來(lái)還原定位源文件的具體的位置和行數(shù) 可以說(shuō)，腦洞真的很大，但這就完了嗎，不止~

前面我們只講了服務(wù)端的json，那客戶端也生成了一份呢，那個(gè)有什么用呢？我們?cè)俅芜M(jìn)入vue源碼去挖掘， 很快就找到了答案

客戶端的注入優(yōu)化

我們知道服務(wù)端渲染會(huì)返回一個(gè)html，然后接下來(lái)客戶端會(huì)走一次hydration，客戶端需要的文件，例如js和css，我們需要在寫在html里面，然后通過(guò)http去請(qǐng)求文件回來(lái)，不然怎么hydration啊

但這里有個(gè)維度，哪些是入口文件，哪些是異步文件，vue服務(wù)端自帶client-plugin已經(jīng)幫我們抽離出來(lái)了，OK，回到我們構(gòu)建html，對(duì)于入口文件和css，我們會(huì)做preload的優(yōu)化，對(duì)于異步的會(huì)做prefetch優(yōu)化，同時(shí)對(duì)于入口的js還會(huì)做個(gè)script標(biāo)簽的defer加載提高并發(fā)數(shù)

總結(jié)

Vue SSR就是這么巧妙地利用兩個(gè)webpack插件提取項(xiàng)目的關(guān)鍵信息生成bundle，從而達(dá)到服務(wù)器熱更以及前端加載優(yōu)化，真的可以說(shuō)腦洞很大

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論