Feedback on PRPL implementation
Closed this issue · 6 comments
@grgur Nice work. Looking at the current Helmet branch, here's some quick feedback reading through the source:
It appears routes are being 'preloaded' through script but without using link rel='preload'. Pardon me if you're using it but I couldn't find it. One way to load scripts using preload would be with a pattern like this one. Alternatively, you could use HTML Webpack Plugin to inject preload directives into your pages.
PRPL also recommends precaching routes. The easiest way to get this setup with Webpack would either be using https://www.npmjs.com/package/sw-precache-webpack-plugin in your Webpack config or directly using sw-precache in your npm scripts (e.g after your app is built, just run it against the static directory).
@addyosmani much appreciated!
Actually, link rel=preload is used from helmet on this line and the array of links was set a few lines above. I think it basically resolves to a similar pattern to the one you linked to.
I wasn't aware of the sw-precache plugin, thanks. I love the idea. Looks like there will be an update coming up real soon 😄
I wasn't aware of the sw-precache plugin, thanks. I love the idea. Looks like there will be an update coming up real soon 😄
Awesome! Looking forward to it :) Thanks for the clarification around preload use. I saw Helmet but didn't realize it was tacking care of that under the hood!
@grgur Pardon a silly question: it looks like a few commits after the helmet one referenced, preload was switched out for just async loading: https://github.com/ModusCreateOrg/react-dynamic-route-loading-es6/blob/steps/6-no-helmet-scripttags/client/containers/App/index.js. Was that intentional?
https://github.com/ModusCreateOrg/react-dynamic-route-loading-es6/blob/steps/4-automatic-preload/client/containers/App/index.js#L25 was the one that had preload from what I can tell. Again I might be missing something obvious :)
@addyosmani good question. I created that example to demonstrate pros and cons of each approach. Since link rel=preload didn't quite make it to Safari, I wanted offer my audience a simple solution (without old school preloading gimmicks to avoid confusion) for their iOS users. Obviously it came with a preload vs load + execution explanation.
I'm working on an article that should accompany this example. I'll shoot you a draft for review, if that's fine.
Re precaching with SW, sorry it took me a while, but I felt compelled to take it another step forward with a more cross-browser solution. Too bad iOS leaves us with only deprecated infrastructure to work with :/
@addyosmani here's what I had in mind. Switched back to link rel=preload for preload, using SW for precache with Appcache fallback. I don't have a fallback strategy for preloading, though, but I reckon precaching is the important bit here
https://github.com/ModusCreateOrg/react-dynamic-route-loading-es6/tree/steps/7-precache-preload