Reacticon Deck
•0 likes•117 views
Report
Download to read offline
Reacticon slide deck on bundling
Recommended
More Related Content
Recently uploaded
Recently uploaded(20)
Featured
Featured(20)
Reacticon Deck
- 1. ANDREW LEVINE • Front-End Architect • Owner of m2 Front-End • A glutton for punishment • Clearly not a designer
- 4. WEBPACK + M2? 🤔 🤔 🤔
- 9. QUICK TOUR OF THE TALK WHY BUNDLE? BUNDLING CURRENT STATE HOW TO FIX IT? CAN I HELP?
- 12. M2 BUNDLING – CURRENT STATE
- 15. M2 BUNDLING – CURRENT STATE home-page.js product- page.js catalog-page.js checkout- page.js account- page.js moment.js jquery.js knockout.js fotorama.js jquery-ui.js captcha.js collapsible.js https://www.kitty-kommerce.com/home /bundle.js
- 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 – CURRENT STATE home-page.js jquery.js jquery-ui.js https://www.kitty-kommerce- optimized.com/home /home-bundle.js /commons-bundle.js slider.js featured- products.js /home-d7978asd79agsd.js PRELOAD LAZY LOAD
- 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
Editor's Notes
- 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)
- All JavaScript files – too many! Bundles abound with dead code
- 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
- Per-page bundling
- 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