前端prerender-spa-plugin预渲染

prerender-spa-plugin预渲染：构建阶段生成匹配预渲染路径的 html 文件（注意：每一个须要预渲染的路由都有一个对应的
html）。构建出来的 html 文件已有部份内容。

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：要预渲染的页面路由

inject：默认挂在window.__PRERENDER_INJECTED对象上，能够经过window.__PRERENDER_INJECTED.foo在预渲染页面取值

headless：渲染时显示浏览器窗口。对调试颇有用。

renderAfterDocumentEvent：等到事件触发去渲染，此处我理解为是Puppeteer获取页面的时机

renderAfterDocumentEvent 这个则很关键，这个是监听 document.dispatchEvent
事件，决定何时开始预渲染。须要在钩子函数中触发事件，如

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

renderAfterElementExists：等到dom元素出现时去渲染

renderAfterTime：5000ms后去渲染

• webpack打包编译

结合项目，执行打包编译命令

npm run build:prod

在dist目录下生成如下页面，虽然生成了两层目录，可是仍是映射到'/mobile/home.html', '/mobile/doctor_team.html', '/mobile/about.html'

查看打包之后的页面，body内容已经渲染好了

启动http-server访问http://127.0.0.1:8080/mobile/about.html，效果跟正常访问一致

原理

prerender-spa-plugin 利用了 Puppeteer 的爬取页面的功能。 Puppeteer 是一个 Chrome官方出品的 headlessChromenode 库。它提供了一系列的 API, 能够在无 UI 的状况下调用 Chrome 的功能, 适用于爬虫、自动化处理等各类场景。它很强大，因此很简单就能将运行时的 HTML 打包到文件中。原理是在 Webpack 构建阶段的最后，在本地启动一个 Puppeteer 的服务，访问配置了预渲染的路由，而后将 Puppeteer 中渲染的页面输出到 HTML 文件中，并创建路由对应的目录。

图片描述(最多50字)
具体代码能够结合render-puppeteer下的代码来看

图片描述(最多50字)
在render.js中，启动本地服务，经过page.goto依次访问

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

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

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

经过page.content()获取html

总结

结合项目实践了下这个插件，也有很多坑

1.在config/index.js中assetsPublicPath原先写的是/dist,致使预渲染的页面body没有渲染出来，是空白页面，改为/就能预渲染出来，可是这样致使不须要预渲染的页面资源路径不对

2.该插件在webpack此版本下不支持路由懒加载，

"webpack": "^4.6.0",

网上提到npm i webpack@4.28.4能够解决，果真升级了webpack版本后支持路由懒加载

3.在须要请求动态数据的页面中，预渲染只能保证静态部分不更改，若是不想写死，要作动态数据代理，webpack的devserver代理数据无效，须要用nginx或者其余代理工具代理线上数据