In his talk at Magento Meetup Kharkiv, Robin van Raan covers the latest techniques for RequireJS optimizations for Magento 2. Did you know that your production site is running RequireJS in development mode? Let's fix that and make your frontend 3x faster!

1. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Making the Magento2 JavaScript loading great again
Javascript, RequireJS, Bundling, Merging, Minifying, r.js Optimizer, Baler

2. © 2019 Adobe. All Rights Reserved. Adobe Confidential. 2
Robin van Raan
Magento technical Architect
vanraan@adobe.com

3. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Magento 1 issues
§ Loading JavaScript libraries?!
§ Double loading by extensions
§ Multiple versions of libraries
§ Problematic sorting orders
3

4. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Magento 2
4

5. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
The issue
5

6. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Waterfall
6

7. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Waterfall
7
Module Dependencies
AAA BBB, CCC
BBB DDD
CCC EEE
DDD
EEE

8. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Waterfall
8
AAA.js
BBB.js
CCC.js
DDD.js
EEE.js

9. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Waterfall
9

10. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Magento Bundling to the rescue!
10

11. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Dead code
11
Bundled Total JS
No 495 KB (1.5 MB uncompressed)
Yes 2.1 MB (7.6 MB uncompressed)

12. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Bundles vs Non Bundled on 3G mobile
12

13. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Magento Advanced Bundling to the resque!
13

14. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
M2 DevTools
14

15. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
M2 DevTools
15
§ https://github.com/magento/m2-devtools

16. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
M2 DevTools
16

17. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
M2 DevTools
17

18. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
M2 DevTools
18

19. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
M2 DevTools – live demo
19
Live demo of M2 Devtools

20. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
M2 DevTools - issues
20
§ Cannot read property 'sectionLoadUrl' of undefined
§ Totals
§ Minicart
§ < 2.3.3
§ https://github.com/magento/m2-devtools/issues/56
§ ES6
§ Syntax errors
§ Minification breaks

21. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
M2 DevTools
21
§ Pro’s
§ 3x JS loading speed increase
§ ”simple”
§ Con’s
§ From start of project or possible work
§ Changes to JS might require new optimizer file

22. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Baler
22

23. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Baler - Alpha
23
§ https://github.com/magento/baler
§ https://github.com/adifucan/m2-baler

24. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Baler - run
24

25. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Baler - compare
25
Setup Non-Blocking Gzip Raw Requests
Unbundled X 495 KB 1.5 MB 176
Bundled 2.1 MB 7.6 MB 10
Baler X 400 KB 1.2 MB 77

26. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Baler – M2.3.3 or fix the core!
26
§ Core fixes:
https://github.com/magento/magento2/commit/db43c11c6830465b764ede32abb7262258e5f574

27. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Baler – mixins support
27
§ Mixins are not applied for bundles (yet!)
§ https://github.com/magento/baler/issues/23

28. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Baler – Alpha testers
28
§ Install baler
§ Install the M2 extension
§ Run baler
§ Let us know your results and issues

29. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Summary
29
§ Magento 2 RequireJS needs optimizing
§ RequireJS optimizations can have a huge performance impact
§ Optimize now? Advanced bundling with M2-devtools
§ Optimize in the future -> Baler
§ We need alpha testers on custom stores with Baler

30. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Thank you
30
Questions?

31. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
Thank you
31
Thank you