Bundle怎么在VueSSR中使用
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)Bundle怎么在Vue SSR中使用，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)公司主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)、VI標(biāo)志設(shè)計(jì)、全網(wǎng)整合營(yíng)銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式網(wǎng)站建設(shè)公司、成都手機(jī)網(wǎng)站制作、微商城、網(wǎng)站托管及成都網(wǎng)站維護(hù)、WEB系統(tǒng)開發(fā)、域名注冊(cè)、國(guó)內(nèi)外服務(wù)器租用、視頻、平面設(shè)計(jì)、SEO優(yōu)化排名。設(shè)計(jì)、前端、后端三個(gè)建站步驟的完善服務(wù)體系。一人跟蹤測(cè)試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為成都工商代辦行業(yè)客戶提供了網(wǎng)站改版服務(wù)。
客戶端 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展開，會(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ù)
上述就是小編為大家分享的Bundle怎么在Vue SSR中使用了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
本文名稱：Bundle怎么在VueSSR中使用
URL標(biāo)題：http://m.jiaotiyi.com/article/pcihhd.html