PRPL Pattern with Webpack and React
•10 likes•5,456 views
Report
Share
Download to read offline
Optimizing web app delivery speed with PRPL pattern. Interactive demo with Webpack and React sample code. Project available with an incremental 7-step process for free on GitHub. Presentation from Split.JS Meetup. GitHub project: https://github.com/ModusCreateOrg/react-dynamic-route-loading-es6/tree/steps/6-no-helmet-scripttags
More Related Content
What's hot
What's hot(20)
Similar to PRPL Pattern with Webpack and React
Similar to PRPL Pattern with Webpack and React(20)
More from Grgur Grisogono
More from Grgur Grisogono(17)
Recently uploaded
Recently uploaded(20)
![[2023] Putting the R! in R&D.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/2023puttingtherinrd-231122234738-294b2909-thumbnail.jpg?width=768&fit=bounds)
PRPL Pattern with Webpack and React
- 1. PRPL with & Grgur Grisogono @ggrgur Modus Create @moduscreate
- 3. Cras justo, dapibus ac facilisis in, egestas eget quam. ⚠ Problems 🌍 Mobile web is slow 📱 ⚛ Avg mobile device is low/mid end Computing moved to client side
- 4. 53% of visitors abandon sites if it takes more than 3 seconds to load Google DoubleClick
- 5. Mobify 100msdecrease in loading 1.11%conversion increase
- 7. Avg Content/Page 2010 113 kB 702 kB httparchive.org 2016 420 kB 2469 kB Year JS All
- 8. Download on 3G 4 seconds Cost of 420kB JS Parse time 400+ ms
- 9. CACHING 1 2 GOALS Minimum Time to Initial Impression Minimum Time to Interactive
- 12. Request App Shell Route Interactive Preload chunks Dependencies Routes Dependencies Possible successors (HTTP2 Push) Minimal architecture Pre-render Preload APIs Switch route Execute JS Cache PRPL Workflow
- 13. bit.ly/prpl-wpack Demo 🍿 Bundled SPA vs Chunks & Preloading
- 14. No add-ons🚫📶Regular 3G bandwidth throttling 5x CPU throttling 🐢 No caching💾 Testing Environment
- 15. 23.0KB 67.7KB App Core Size 34% of the original
- 16. 600.0ms 1,550.0ms Core DL Time 38% of the original
- 17. 256.0ms 870.0ms Scripting Time 29% of the original
- 18. 1,750ms 3,000ms Time to Interactive 58% of the original +14% conversion 💰
- 19. Branches: step-0 to step-6 Try yourself bit.ly/prpl-wpack
- 20. Reach out! 🙌 moduscreate.com @moduscreate Grgur Grisogono @ggrgur