HOW DO WE FIX IT?
• Create bundles per page type
• Lazy load JS not used for first render
• Sounds simple, right?
M2 BUNDLING –
ALTERNATIVES TO WEBPACK
• RequireJS Optimizer does its job as advertised
• Manual bundle config with RequireJS optimizer (already
being used in production by some)
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) https://tinyurl.com/goog-server-push 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?
Per-site bundling 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