Upcoming SlideShare
Realtime Webpack - Pushing on-demand bundling to the limits by Oliver Woodings
- 1. Realtime Webpack Pushing on-demand bundling to the limits March 2017 @oliverwoodings
- 2. We help our clients deliver highly persuasive personalization at scale, to their best customers, at the right time.
- 3. What does that mean? Collect data Surface insights (machine learning etc) Define segments, design personalisations Serve personalisations /segments back to end users
- 4. How do we deliver web assets Build Pipeline Qubit Platform CDN Browser End UserQubit Customer Prod Bundle Personalisation & Segments Preview Bundle Event stream
- 5. How do we deliver web assets Build Pipeline Qubit Platform CDN Browser End UserQubit Customer Prod Bundle Personalisation & Segments Preview Bundle Event stream
- 6. Filesystem - index.js - app/ - actions/ - components/ - views/ - reducers/ - App.js - node_modules/ Yarn Webpack Dev Server Browser A typical webpack setup
- 7. Why doesn't this work for us?
- 8. Each client is different! Why doesn't this work for us?
- 9. Filesystem - index.js - app/ - actions/ - components/ - views/ - reducers/ - App.js - node_modules/ Yarn Webpack Dev Server Browser Let’s fix it up…
- 10. 1. Get rid of the fs Webpack Dev Server Browser MemoryFS - entry.js - .cache - config.js - experiences-2499/ - activation.js - variation-1.js - variation-1.css MySQL Redis package cache npm registry
- 11. 2. Replace webpack dev server Redis package cache npm registry Dynamic compiler service Browser Redis bundle cache My SQL MemoryFS - entry.js - .cache - config.js - experiences-2499/ - activation.js - variation-1.js - variation-1.css
- 12. Redis package cache 3. Scale Worker PoolMySQL Dynamic compiler service MemoryFS Loadbalancer MemoryFS MemoryFS Dynamic compiler service Dynamic compiler service Redis bundle cache npm registry Browser
- 13. Redis package cache Worker PoolMySQL Dynamic compiler service MemoryFS Loadbalancer MemoryFS MemoryFS Dynamic compiler service Dynamic compiler service Redis bundle cache npm registry Browser 4. Queue and autoscale Autoscaler Job Queue CDN
- 14. The result 11k builds/day on average 2.6 seconds average build duration 4 preview builds/second with 6 preview workers
- 15. Performance under load
- 16. Performance under load • 1000 webpack builds
- 17. Performance under load • 1000 webpack builds • 100 workers
- 18. Performance under load • 1000 webpack builds • 100 workers • Completed in 2 minutes
- 19. Performance under load • 1000 webpack builds • 100 workers • Completed in 2 minutes • Peak throughput of 9 builds per second
- 20. So what?
- 21. So what? • Make it snappy - HappyPack
- 22. So what? • Make it snappy - HappyPack • Keep it simple - Preact and Buble
- 23. So what? • Make it snappy - HappyPack • Keep it simple - Preact and Buble • Tidy up after yourself - clean webpack config
- 24. So what? • Make it snappy - HappyPack • Keep it simple - Preact and Buble • Tidy up after yourself - clean webpack config • Be realistic - tree shaking
- 25. So what? • Make it snappy - HappyPack • Keep it simple - Preact and Buble • Tidy up after yourself - clean webpack config • Be realistic - tree shaking • Try it flat - Rollup
- 26. @oliverwoodings oli@qubit.com Thanks!
Be the first to comment
Login to see the comments
-
adaziz
Jul. 26, 2018
Bundling JavaScript nowadays is trivial. But what if you need to do it 10,000 times a day to thousands of users, with sourcemaps, served directly to the browser in under 2 seconds? Oliver will show us how they did this at Qubit
Views
Total views
958
On Slideshare
0
From embeds
0
Number of embeds
1
Actions
Downloads
8
Shares
0
Comments
0
Likes
1
Be the first to comment