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.

of

Reacticon Deck Slide 1 Reacticon Deck Slide 2 Reacticon Deck Slide 3 Reacticon Deck Slide 4 Reacticon Deck Slide 5 Reacticon Deck Slide 6 Reacticon Deck Slide 7 Reacticon Deck Slide 8 Reacticon Deck Slide 9 Reacticon Deck Slide 10 Reacticon Deck Slide 11 Reacticon Deck Slide 12 Reacticon Deck Slide 13 Reacticon Deck Slide 14 Reacticon Deck Slide 15 Reacticon Deck Slide 16 Reacticon Deck Slide 17 Reacticon Deck Slide 18 Reacticon Deck Slide 19 Reacticon Deck Slide 20 Reacticon Deck Slide 21 Reacticon Deck Slide 22
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Download to read offline

Reacticon Deck

Download to read offline

Reacticon slide deck on bundling

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

Reacticon slide deck on bundling

Views

Total views

112

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×