Repository files navigation

Implement server pre-rendering byPuppeteer, including obtaining the HTML structure content rendered, support server side render(ssr) and client side render(csr) page.

npm install puppeteer-html-prerender-webpack-plugin --save-dev

constPuppeteerHtmlPrerenderPlugin=require('puppeteer-html-prerender-webpack-plugin');module.exports={plugins:[newPuppeteerHtmlPrerenderPlugin({url:'http://49.233.172.37:7001/csr',selector:'#app',waitSelector:'#app',beforeEvaluate:async(browser,page)=>{awaitpage.setUserAgent('Mozilla/5.0 (Linux; U; Android 9; en-US) Chrome/57.0.2987.108 UCBrowser/12.12.5.1189 Mobile');},afterEvaluate:async(browser,page,html)=>{returnhtml;},})]}

PuppeteerHtmlPrerenderPlugin options:

• url - prefetch render url
• selector { optional } - fetch selector element html. if not exist, will return all html.
• selectorOuterHTML { optional, default: true } - return selector self node content.
• waitSelector { optional } - fetch selector element html until waiting selector element exist, the config can get the client render mode html content.
• debug { optional, default: false } - print puppeteer execute cost and key info
• beforeEvaluate { optional } - before evaluate fetch hook
• afterEvaluate { optional } - after evaluate fetch hook

MIT