預渲染原理

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

預渲染應用場景：

seo優化 對于一些動態數據利用enderAfterTime也可以進行預渲染出來。當動態數據渲染出來之后，客戶端代碼比如bundle.js會立馬接管dom操作。對于spa優化可謂是非常方便。

對于meta頭的seo優化會結合vue-meta-info插件來優化 https://mp.weixin.qq.com/s/lM808MxUu6tp8zU8SBu3sg

骨架屏。 兩種思路：

• 把骨架屏當做預渲染頁面，當ajax獲取到數據之后再把骨架屏替換掉
• prerender-spa-plugin提供了postProcessHtml鉤子

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

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

預渲染不適用經常變化的數據，比如說股票代碼網站，天氣預報網站。因為此時的數據是動態的，而預渲染時已經生成好了dom節點。如果要兼容seo可以使用SSR。 預渲染不適用大量的路由頁面,比如成千上百個路由，此時打包后預渲染將會非常慢。 預渲染最好的應用場景是需要seo的活動頁面，配合vue-meta-info插件優化meta標簽，開箱即用。

如何把異步數據渲染成靜態頁面

三種方案

plugin中設置renderAfterTime：5000 //觸發渲染的時間，用于獲取數據后再保存渲染結果

plugin中設置

renderAfterDocumentEvent: 'render-event'

根組件中設置

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

plugin中設置

renderAfterElementExists: 'my-app-element'

會等待dom節點class為my-app-element生成功之后再進行預渲染

生成的路由跳轉新頁面

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

如何處理某些節點是否需要預渲染

plugin中配置

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

頁面中使用

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

prerender-spa-plugin的一些坑

路由生成對應的頁面(.html)時某些數據沒有被渲染出來

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

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

直接訪問某個為.html文件的后綴時只能渲染出靜態頁面，不會渲染到對應的路由。

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

刷新總是會閃一下首頁

這個是服務端渲染后,樣式文件沒跟上導致的,css要提取成一個文件就好了,了解一下這個plugin ExtractTextPlugin

配置不生成文件夾，值生成html文件時

postProcess (renderedRoute) {// 重點// 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}

打包之后會報錯 解決辦法：去掉data-server-rendered="true" 但是此時又會出現路由對應的路由無法渲染的問題。無解。

未解決的問題

沒有正確渲染對應.html后綴的文件 比如http://localhost:8096/about/index.html 此文件因為沒有被路由/about所查到，所以，只能渲染靜態的html文件。（可能需要服務端或ngix支持才能正確渲染。

最后

盡量不要生成不帶文件夾的html頁面，會出現一些怪異的問題。 盡量不要直接訪問.html后綴的文件。因為.html后綴的文件內容是靜態的，并且沒有對應路由,也會造成渲染問題。

項目地址

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。