前言

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

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

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

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

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

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

服務端的熱更和sourcemap

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

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

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

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

其中我們知道runInNewContext決定是否創(chuàng)建新的上下文，我們知道如果設置為false，則會使用runInThisContext創(chuàng)建沙箱，但是會容易污染全局global，如果我們使用runInNexContext來創(chuàng)建，同時傳入我們預先傳入的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ù) 可以說，腦洞真的很大，但這就完了嗎，不止~

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

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

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

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

總結

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論