16. HOW DO WE FIX IT?
• Create bundles per page type
• Lazy load JS not used for first render
• Sounds simple, right?
17. M2 BUNDLING –
19. ALTERNATIVES TO WEBPACK
• RequireJS Optimizer does its job as advertised
• Manual bundle config with RequireJS optimizer (already
being used in production by some)
20. SO, UHH…WHY WEBPACK?
• Trojan Horse used to sneak in better tooling
• Can incrementally compile Less or SASS
• Compile modern JS (Oh hey Babel)
• Support for standardized modules (ES2015),
CommonJS, and AMD
• Auto refresh page on JS change/Hot Reload CSS
• Heavy FE community adoption
• Share with PWA Studio project
Experimental work ahead
0 guarantees this will ship
Consider this a sneak-peek
Will be talking critically about some features
Do *not* take this as an attack on any authors
When commenting or tweeting, keep in mind there is a person or people behind every line of code
Hindsight is 20/20, we all learn
- Current on again off again experiment
Default for new stores when released
Migration of existing stores will take a few years at a minimum
Focused on perf wins for existing stores
Not mutually exclusive
HTTP 1.1 only allows 6 max TCP connections to a single host
Promises of HTTP2 push helping did not pan out (cache & overpushing issues)
Web packaging spec with h2 push better candidate for success - https://github.com/WICG/webpackage
Note for PWA enthusiasts: web packaging spec would enable sending your “app” to others offline (think airdrop)
Always a good idea to put a large chart with lots of data in a slidedeck, right?
Too much dead code makes kitty sad
Credits to Kril for original work on optimized r.js configuration
Credits to Roman for work on this internally
Credits to Shane O from JH for automating this work
Backend devs in Magento have great tooling…what about the FE?
Rare situation where happier dev experience can === happier end-user experience