SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 30 day free trial to unlock unlimited reading.
Realtime Webpack - Pushing on-demand bundling to the limits by Oliver Woodings
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
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
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
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