Splitting the bundle on static websites

Transcript

1. Splitting the bundle on static websites @mattclaffey1 – code-mattclaffey Slides.ihd93usdewfj.version
2. Who am I? Frontend Developer @computerlovers @mattclaffey1 code-mattclaffey Slides.ihd93usdewfj.version
3. The story of the new build Slides.ihd93usdewfj.version Once upon a time..
4. new build Slides.ihd93usdewfj.version HTML CSS JS
5. 1 year… Slides.ihd93usdewfj.version HTML CSS JS
6. We fix some stuff Slides.ihd93usdewfj.version HTML CSS JS
7. 3 years... Slides.ihd93usdewfj.version HTML CSS JS
8. Story time – 3 years... Slides.ihd93usdewfj.version HTML CSS JS Parse/Execute
10. Pros Slides.ihd93usdewfj.version • Easy to just output one bundle • Good for HTTP/1 • Large files compress better with GZIP
11. Cons Slides.ihd93usdewfj.version • Really easy to invalidate caches • Bloated pages • More JS the more to parse • Costly to the users data • One error can potential break the whole bundle • Polyfill’s can find their way in easily • Vendor files get downloaded on pages that may not need them
12. The story of Hillarys Slides.ihd93usdewfj.version Yes… Over 5 years in…
13. Who are Hillary’s? Slides.ihd93usdewfj.version
14. Why did we code split? Slides.ihd93usdewfj.version HTML CSS JS Parse/Execute
15. What we already have in place… Slides.ihd93usdewfj.version • Http/2 • Service Worker caching static assets & offline page • ?cb=querystring cachebusters • One fat bundle L • Stupid amounts of third party JavaScript Our challenge: Load only the JavaScript that the page needs rather than sending it all.
16. The biggest unknowns… Slides.ihd93usdewfj.version • Race conditions when splitting the bundles (mainly around polyfills & vendor) • Will it impact the current caching strategy in place?
17. Slides.ihd93usdewfj.version
18. Polyfills Slides.ihd93usdewfj.version Components/other Vendor Polyfills
19. At first… Slides.ihd93usdewfj.version
20. Split into separate bundles based on browsers Slides.ihd93usdewfj.version
21. Slides.ihd93usdewfj.version
22. How it works Slides.ihd93usdewfj.version Website User agent header contains – MSIE ?features=picturefill,Promise Cdn.polyfill.io Request Send back picturefill and Promise polyfills
23. Defer all the way Slides.ihd93usdewfj.version
24. How does that look on the network Slides.ihd93usdewfj.version Chrome Safari Internet Explorer 11
26. To make this even faster Slides.ihd93usdewfj.version • Preload • Preconnect/ DNS prefetch
27. Vendor Slides.ihd93usdewfj.version Components/other Vendor
28. What’s in our vendor? Slides.ihd93usdewfj.version • JQuery 95kb • Slick-Carousel 45kb • Masonry-Layout 23kb • Lazysizes 7kb • Imagesloaded 5.5kb
29. What’s in our vendor? Slides.ihd93usdewfj.version • JQuery 95kb – legacy components use it and a carousel plugin • Slick-Carousel 45kb – components use this • Masonry-Layout 23kb – one component uses this • Lazysizes 7kb – needed on all pages • Imagesloaded 5.5kb – one component uses this
30. Let’s split vendor option 1 Slides.ihd93usdewfj.version
31. Pros Slides.ihd93usdewfj.version • Easy to do • Works well with our current caching strategy • Cache would rarely change • Gzip would love it • Defer removes race conditions
32. Let’s split vendor option 2 Slides.ihd93usdewfj.version Bundle One needs jQuery Bundle Two needs jQuery jQuery
33. How it looks on the network Slides.ihd93usdewfj.version This doesn’t need jQuery - This needs jQuery - jQuery loads - component-one~component-two~component-three.js
34. Components Slides.ihd93usdewfj.version Components/other
35. Dynamic Imports - Webpack Slides.ihd93usdewfj.version
36. Dynamic Imports - Webpack Slides.ihd93usdewfj.version
37. Output Slides.ihd93usdewfj.version
38. What's wrong with 0.chunk.js Slides.ihd93usdewfj.version • Website error logs would track a number instead of a component name if they ever 404 • Debugging would be a nightmare
39. Dynamic Imports - Webpack Slides.ihd93usdewfj.version
40. Output Slides.ihd93usdewfj.version
41. Output Slides.ihd93usdewfj.version
42. All components will load L Slides.ihd93usdewfj.version
43. Loading components only on the page Slides.ihd93usdewfj.version
44. The Network on Hillary’s Slides.ihd93usdewfj.version Homepage Appointment Page
45. Taking it further Slides.ihd93usdewfj.version
46. Load modules on scroll Slides.ihd93usdewfj.version Above the fold only needs critical js on this page Component one
47. Demo Slides.ihd93usdewfj.version
48. Load modules on scroll Slides.ihd93usdewfj.version
49. Cookie Banners Slides.ihd93usdewfj.version
50. Lazyloading chunks Slides.ihd93usdewfj.version
51. When it has been interacted with Slides.ihd93usdewfj.version
54. Fixing the cache Slides.ihd93usdewfj.version
55. Setup caching with webpack Slides.ihd93usdewfj.version
56. Setup HTMLWebpack Plugin Slides.ihd93usdewfj.version
58. Results Slides.ihd93usdewfj.version
59. Results Slides.ihd93usdewfj.version Previous 128kb Gzipped After 42kb Gzipped (jQuery is 34kb) 77%reduction on the homepage
60. Iteration 2 Slides.ihd93usdewfj.version
61. Iteration 2 Slides.ihd93usdewfj.version • Remove jQuery & replace slick carousel with a vanilla alternative – potential loss of 34kb off each page. • Server side rendering of the split components so we can preload them & remove the dependency for one file to load all scripts.
62. Summary Slides.ihd93usdewfj.version • Don’t over complicate how you load your polyfills in. Use polyfill.io to do the hard work for you. • Put all files in one vendor bundle or let webpack figure out when to download a certain vendor with dynamic imports • Use dynamic imports to: • Check if components exist in the page before loading • Lazyload components on scroll (optional) • Lazyloading when interacted with (optional)
63. Thank you Slides.ihd93usdewfj.version