前端prerender-spa-plugin預(yù)渲染

godiscoder 發(fā)布于2019-08-23 15:16 / 2623人閱讀

摘要：預(yù)渲染構(gòu)建階段生成匹配預(yù)渲染路徑的文件注意每個(gè)需要預(yù)渲染的路由都有一個(gè)對(duì)應(yīng)的。使用安裝中引入代碼打包目錄模板頁面要預(yù)渲染的頁面路由默認(rèn)掛在對(duì)象上，可以通過在預(yù)渲染頁面取值渲染時(shí)顯示瀏覽器窗口。

prerender-spa-plugin預(yù)渲染：構(gòu)建階段生成匹配預(yù)渲染路徑的 html 文件（注意：每個(gè)需要預(yù)渲染的路由都有一個(gè)對(duì)應(yīng)的
html）。構(gòu)建出來的 html 文件已有部分內(nèi)容。

prerender-spa-plugin使用

安裝prerender-spa-plugin

npm install prerender-spa-plugin --save

webpack.prod.config.js中引入

const PrerenderSPAPlugin = require("prerender-spa-plugin")
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, "../dist"), 
// outputDir: path.join(__dirname, "../prerendered"),
indexPath: path.join(__dirname, "../dist", "index.html"), 
routes: ["/mobile/home.html", "/mobile/doctor_team.html", "/mobile/about.html"], 
renderer: new Renderer({
inject: {
foo: "bar"
},
headless: false, 
renderAfterDocumentEvent: "render-active" 
// renderAfterElementExists: ".container", 
// renderAfterTime: 5000 
})
})
]

staticDir：代碼打包目錄

indexPath：模板頁面

routes：要預(yù)渲染的頁面路由

inject：默認(rèn)掛在window.__PRERENDER_INJECTED對(duì)象上，可以通過window.__PRERENDER_INJECTED.foo在預(yù)渲染頁面取值

headless：渲染時(shí)顯示瀏覽器窗口。對(duì)調(diào)試很有用。

renderAfterDocumentEvent：等到事件觸發(fā)去渲染，此處我理解為是Puppeteer獲取頁面的時(shí)機(jī)

renderAfterDocumentEvent 這個(gè)則很關(guān)鍵，這個(gè)是監(jiān)聽 document.dispatchEvent
事件，決定什么時(shí)候開始預(yù)渲染。需要在鉤子函數(shù)中觸發(fā)事件，如

new Vue({
 el: "#app",
 router,
 render: h => h(App),
 mounted () {
 // You"ll need this for renderAfterDocumentEvent.
 document.dispatchEvent(new Event("render-active"))
 }
});

renderAfterElementExists：等到dom元素出現(xiàn)時(shí)去渲染

renderAfterTime：5000ms后去渲染

webpack打包編譯

結(jié)合項(xiàng)目，執(zhí)行打包編譯命令

npm run build:prod

在dist目錄下生成以下頁面，雖然生成了兩層目錄，但是還是映射到"/mobile/home.html", "/mobile/doctor_team.html", "/mobile/about.html"

查看打包以后的頁面，body內(nèi)容已經(jīng)渲染好了

啟動(dòng)http-server訪問http://127.0.0.1:8080/mobile/about.html，效果跟正常訪問一致

原理

prerender-spa-plugin 利用了 Puppeteer 的爬取頁面的功能。 Puppeteer 是一個(gè) Chrome官方出品的 headlessChromenode 庫。它提供了一系列的 API, 可以在無 UI 的情況下調(diào)用 Chrome 的功能, 適用于爬蟲、自動(dòng)化處理等各種場景。它很強(qiáng)大，所以很簡單就能將運(yùn)行時(shí)的 HTML 打包到文件中。原理是在 Webpack 構(gòu)建階段的最后，在本地啟動(dòng)一個(gè) Puppeteer 的服務(wù)，訪問配置了預(yù)渲染的路由，然后將 Puppeteer 中渲染的頁面輸出到 HTML 文件中，并建立路由對(duì)應(yīng)的目錄。

圖片描述(最多50字)
具體代碼可以結(jié)合render-puppeteer下的代碼來看

圖片描述(最多50字)
在render.js中，啟動(dòng)本地服務(wù)，通過page.goto依次訪問

http://localhost:8000/mobile/about.html，

http://localhost:8000/mobile/home.html

http://localhost:8000/mobile/doctor_team.html

通過page.content()獲取html

總結(jié)

結(jié)合項(xiàng)目實(shí)踐了下這個(gè)插件，也有不少坑

1.在config/index.js中assetsPublicPath原先寫的是/dist,導(dǎo)致預(yù)渲染的頁面body沒有渲染出來，是空白頁面，改成/就能預(yù)渲染出來，但是這樣導(dǎo)致不需要預(yù)渲染的頁面資源路徑不對(duì)

2.該插件在webpack此版本下不支持路由懶加載，

"webpack": "^4.6.0",

網(wǎng)上提到npm i webpack@4.28.4可以解決，果然升級(jí)了webpack版本后支持路由懶加載

3.在需要請求動(dòng)態(tài)數(shù)據(jù)的頁面中，預(yù)渲染只能保證靜態(tài)部分不更改，如果不想寫死，要做動(dòng)態(tài)數(shù)據(jù)代理，webpack的devserver代理數(shù)據(jù)無效，需要用nginx或者其他代理工具代理線上數(shù)據(jù)