預(yù)渲染原理

在webpack打包結(jié)束并生成文件后（after-emit hook），會啟動一個(gè)server模擬網(wǎng)站的運(yùn)行，用puppeteer（google官方的headless 無頭瀏覽器瀏覽器）訪問指定的頁面route，得到相應(yīng)的html結(jié)構(gòu)，并將結(jié)果輸出到指定目錄，過程類似于爬蟲。

預(yù)渲染應(yīng)用場景：

seo優(yōu)化 對于一些動態(tài)數(shù)據(jù)利用enderAfterTime也可以進(jìn)行預(yù)渲染出來。當(dāng)動態(tài)數(shù)據(jù)渲染出來之后，客戶端代碼比如bundle.js會立馬接管dom操作。對于spa優(yōu)化可謂是非常方便。

對于meta頭的seo優(yōu)化會結(jié)合vue-meta-info插件來優(yōu)化 https://mp.weixin.qq.com/s/lM808MxUu6tp8zU8SBu3sg

骨架屏。 兩種思路：

• 把骨架屏當(dāng)做預(yù)渲染頁面，當(dāng)ajax獲取到數(shù)據(jù)之后再把骨架屏替換掉
• prerender-spa-plugin提供了postProcessHtml鉤子

postProcessHtml: function (context) {var titles = {'/': '首頁','/about': '關(guān)于','/contact': '鏈接'}return context.html.replace(/<title>[^<]*</title>/i,'<title>' + titles[context.route] + '</title>')}

此鉤子會返回轉(zhuǎn)義之后的靜態(tài)頁面，配置好的路由都會走此回調(diào)，對于動態(tài)生成骨架屏，這也是一種思路,轉(zhuǎn)義之后的字符處理起來比較麻煩(有待考究)

預(yù)渲染不適用經(jīng)常變化的數(shù)據(jù)，比如說股票代碼網(wǎng)站，天氣預(yù)報(bào)網(wǎng)站。因?yàn)榇藭r(shí)的數(shù)據(jù)是動態(tài)的，而預(yù)渲染時(shí)已經(jīng)生成好了dom節(jié)點(diǎn)。如果要兼容seo可以使用SSR。 預(yù)渲染不適用大量的路由頁面,比如成千上百個(gè)路由，此時(shí)打包后預(yù)渲染將會非常慢。 預(yù)渲染最好的應(yīng)用場景是需要seo的活動頁面，配合vue-meta-info插件優(yōu)化meta標(biāo)簽，開箱即用。

如何把異步數(shù)據(jù)渲染成靜態(tài)頁面

三種方案

plugin中設(shè)置renderAfterTime：5000 //觸發(fā)渲染的時(shí)間，用于獲取數(shù)據(jù)后再保存渲染結(jié)果

plugin中設(shè)置

renderAfterDocumentEvent: 'render-event'

根組件中設(shè)置

new Vue({el: '#app',mounted () {setTimeout(() => {document.dispatchEvent(new Event('render-event'))}, 5000)} }) 注意 不是在根組件中設(shè)置此事件無效（比如你想在ajax獲取之后再再派發(fā)事件，此時(shí)并不會觸發(fā)預(yù)渲染）

plugin中設(shè)置

renderAfterElementExists: 'my-app-element'

會等待dom節(jié)點(diǎn)class為my-app-element生成功之后再進(jìn)行預(yù)渲染

生成的路由跳轉(zhuǎn)新頁面

<router-link to="/about" target="_blank" >About</router-link>

如何處理某些節(jié)點(diǎn)是否需要預(yù)渲染

plugin中配置

renderer: new Renderer({renderAfterTime: 5000,injectProperty: '__PRERENDER_INJECTED',inject: {foo: 'bar'}})

頁面中使用

setTimeout(() => {if (window['__PRERENDER_INJECTED']) {return}this.data = '我是異步渲染出來的數(shù)據(jù)'}, 3000) } 預(yù)渲染會在5秒后完成 并且不會對data數(shù)據(jù)進(jìn)行預(yù)渲染

prerender-spa-plugin的一些坑

路由生成對應(yīng)的頁面(.html)時(shí)某些數(shù)據(jù)沒有被渲染出來

在根組件上添加data-server-rendered ='true'

<div id="app" data-server-rendered="true"></>

直接訪問某個(gè)為.html文件的后綴時(shí)只能渲染出靜態(tài)頁面，不會渲染到對應(yīng)的路由。

style加載了2次 官方bug并未解決

刷新總是會閃一下首頁

這個(gè)是服務(wù)端渲染后,樣式文件沒跟上導(dǎo)致的,css要提取成一個(gè)文件就好了,了解一下這個(gè)plugin ExtractTextPlugin

配置不生成文件夾，值生成html文件時(shí)

postProcess (renderedRoute) {// 重點(diǎn)// Remove /index.html from the output path if the dir name ends with a .html file extension.// For example: /dist/dir/special.html/index.html -> /dist/dir/special.htmlif (renderedRoute.route.endsWith('.html')) {renderedRoute.outputPath = path.join(__dirname,'dist',renderedRoute.route)}return renderedRoute}

打包之后會報(bào)錯(cuò) 解決辦法：去掉data-server-rendered="true" 但是此時(shí)又會出現(xiàn)路由對應(yīng)的路由無法渲染的問題。無解。

未解決的問題

沒有正確渲染對應(yīng).html后綴的文件 比如http://localhost:8096/about/index.html 此文件因?yàn)闆]有被路由/about所查到，所以，只能渲染靜態(tài)的html文件。（可能需要服務(wù)端或ngix支持才能正確渲染。

最后

盡量不要生成不帶文件夾的html頁面，會出現(xiàn)一些怪異的問題。 盡量不要直接訪問.html后綴的文件。因?yàn)?html后綴的文件內(nèi)容是靜態(tài)的，并且沒有對應(yīng)路由,也會造成渲染問題。

項(xiàng)目地址

https://github.com/wensiyuanseven/prerender-spa

參考文章

https://github.com/chrisvfritz/prerender-spa-plugin

https://juejin.im/post/6844903737031409677

https://github.com/cisen/blog/issues/570

https://www.cnblogs.com/chuaWeb/p/prerender-plugin.html

https://zhuanlan.zhihu.com/p/29148760

https://www.cnblogs.com/tugenhua0707/p/10725888.html

https://zhuanlan.zhihu.com/p/116102502

總結(jié)

以上是生活随笔為你收集整理的vue预加载动态生成runtime.js_预渲染 prerender-spa-plugin 避坑指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。