Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Reacticon Deck

15 views

Published on

Reacticon slide deck on bundling

Published in: Software
  • Be the first to comment

  • Be the first to like this

Reacticon Deck

  1. 1. ANDREW LEVINE • Front-End Architect • Owner of m2 Front-End • A glutton for punishment • Clearly not a designer
  2. 2. BE RESPECTFUL ✌️
  3. 3. WEBPACK + M2? 🤔 🤔 🤔
  4. 4. WHAT ABOUT PWA?
  5. 5. QUICK TOUR OF THE TALK WHY BUNDLE? BUNDLING CURRENT STATE HOW TO FIX IT? CAN I HELP?
  6. 6. WHY BUNDLE? 😿 😿 😿 😿
  7. 7. M2 BUNDLING – CURRENT STATE
  8. 8. 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
  9. 9. HOW DO WE FIX IT? • Create bundles per page type • Lazy load JS not used for first render • Sounds simple, right?
  10. 10. 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
  11. 11. ALTERNATIVES TO WEBPACK • RequireJS Optimizer does its job as advertised • Manual bundle config with RequireJS optimizer (already being used in production by some)
  12. 12. 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

×