前端prerender-spa-plugin预渲染

godiscoder 发布于2019-08-23 15:16 / 2619人阅读

摘要：预渲染构建阶段生成匹配预渲染路径的文件注意每个需要预渲染的路由都有一个对应的。使用安装中引入代码打包目录模板页面要预渲染的页面路由默认挂在对象上，可以通过在预渲染页面取值渲染时显示浏览器窗口。

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或者其他代理工具代理线上数据

云服务器 GPU云服务器预释放预装机域名预预解析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101779.html

处理 Vue 单页面 SEO 的另一种思路

摘要：官方地址设置单页面信息，如果需要单页面，可以和形成更优的配合单页面应用在前端正大放光彩。随着单页面应用的普及，人们在感受其带来的完美的用户体验，极强的开发效率的同时，也似乎不可避免的要去处理的需求。 vue-meta-info 官方地址： https://github.com/monkeyWang... （设置vue 单页面meta info信息，如果需要单页面SEO，可以和 prer...

shiweifu 2019-08-01 17:35 评论0 收藏0
处理 Vue 单页面 SEO 的另一种思路

摘要：官方地址设置单页面信息，如果需要单页面，可以和形成更优的配合单页面应用在前端正大放光彩。随着单页面应用的普及，人们在感受其带来的完美的用户体验，极强的开发效率的同时，也似乎不可避免的要去处理的需求。 vue-meta-info 官方地址： https://github.com/monkeyWang... （设置vue 单页面meta info信息，如果需要单页面SEO，可以和 prer...

yangrd 2019-08-21 16:21 评论0 收藏0
prerender-spa-plugin 预渲染插件的使用说明

摘要：众所周知单页面应用不利于，为了解决这个问题网上所给出的个解决方案服务器端渲染预渲染由于页面较少，且预渲染相对于比较简单，于是选择预渲染页面，预渲染可以极大的提高网页访问速度。众所周知单页面应用不利于SEO，为了解决这个问题网上所给出的2个解决方案**1、SSH服务器端渲染2、预渲染**由于页面较少，且预渲染相对于SSH比较简单，于是选择预渲染页面，预渲染可以极大的提高网页访问速度。而...

孙吉亮 2019-08-21 18:25 评论0 收藏0
Vue现有项目改造为Nuxt项目

摘要：好了，项目启动了，目录结构也清楚了，接下来就是整个现有项目的迁移了目前正在改造项目，文章尚未写完，会抽时间不定期的继续更新项目的改造过程及分享改造过程中遇到的问题公司项目，最初只为了实现前后端分离式开发，直接选择了vue框架进行开发，然而现在项目基本完成了，发现蜘蛛根本就抓取不到网站数据，搜索引擎搜出来，都是一片空白没有数据，需要对项目做SEO优化。本人第一次接触SEO的优化，完全...

Invoker 2019-08-26 10:25 评论0 收藏0
react 项目构建

摘要：配置方式找到文件如需添加路由则在里面添加，同时需要后端更改配置除了上面的路径，其他路径全部指向单页应用多路由预渲染指南使用说明源码为方便快速构建项目，本例所有配置的代码均放在项目中。写在前面每次构建react项目的时候都会配置一大堆东西，时间久了就会忘记怎么配置。为了方便自己记忆也为了其他开发者在构建react应用时能够快速开发，故作此记录。本项目基于 create-react-...

ACb0y 2019-08-23 11:54 评论0 收藏0