内容简介:prerender-spa-plugin预渲染:构建阶段生成匹配预渲染路径的 html 文件(注意:每个需要预渲染的路由都有一个对应的prerender-spa-plugin使用staticDir:代码打包目录
prerender-spa-plugin预渲染:构建阶段生成匹配预渲染路径的 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或者其他代理 工具 代理线上数据
以上所述就是小编给大家介绍的《前端prerender-spa-plugin预渲染》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 前端网页加载渲染链路优化
- 从渲染原理谈前端性能优化
- 程序员笔记——通过OpenGL理解前端渲染原理(1)
- 前端进阶:还能这样高性能渲染十万级数据?
- Octane渲染入门-渲染设置图文版
- 通过分析 WPF 的渲染脏区优化渲染性能
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
微信营销与运营一册通
何秀芳、葛存山 / 人民邮电出版社 / 2014-10
《微信营销与运营一册通》深入介绍了当今最为火热的话题——微信营销,内容全面、系统和深入。它基于微信的最新版本,从策略、技巧与案例等多角度详细解析了微信的营销与运营,所有内容都是行业经验的结晶,旨在为企业或个人运用微信提供有价值的参考。《微信营销与运营一册通》主要内容如下。 * 5大微信营销利器:书中介绍了5大微信营销利器,包括漂流瓶、二维码、LBS功能、朋友圈和公众平台等。 * 6大微......一起来看看 《微信营销与运营一册通》 这本书的介绍吧!