Bundle怎么在Vue SSR中使用

這期內容當中小編將會給大家帶來有關Bundle怎么在Vue SSR中使用，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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

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

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

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

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

服務端的熱更和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-map npm庫，在堆棧出錯的時候，把錯誤的文件和函數進去，通過消費sourcemap來還原定位源文件的具體的位置和行數 可以說，腦洞真的很大，但這就完了嗎，不止~

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

客戶端的注入優化

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

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

上述就是小編為大家分享的Bundle怎么在Vue SSR中使用了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。