快捷導(dǎo)航

淺談Vue SSR中的Bundle的具有使用

更新時間：2019年11月21日 10:22:23 作者：YYDev

這篇文章主要介紹了淺談Vue SSR中的Bundle的具有使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

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

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

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

然后我們再康康服務(wù)端生成的json， entry 是服務(wù)款入口的文件， files 是服務(wù)端依賴的文件列表， maps 是sourcemaps文件列表，這里暫時是空

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

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

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

接下來我們再去看看createBundleRunner里面這個方法，最關(guān)鍵是evaluateModule 里面調(diào)用getCompiledScript這個方法，其中evaluateModule 還會把執(zhí)行的結(jié)果緩存到evaluatedFiles里面去

getCompiledScript里面通過調(diào)用vm.Scirpt把我們在entry里面的代碼丟進vm創(chuàng)建的沙箱里面，同時也是要compiledScripts把生成的script片段緩存起來

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

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

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

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

前面我們只講了服務(wù)端的json，那客戶端也生成了一份呢，那個有什么用呢？我們再次進入vue源碼去挖掘，很快就找到了答案

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

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

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