10KB or Bust: The Delicate Power of Webpack and Babel

Presented at VoxxedDays Bucharest.

Transcript

1. 1 0 K B O R B U S T T H E D E L I C AT E P O W E R O F W E B PA C K A N D B A B E L B R I A N H O LT — M I C R O S O F T — @ H O LT B T
2. I’m currently a cloud developer advocate for Microsoft Azure
8. Cities I’ve lived in
11. W E ’ R E T RY I N G O U R B E S T, D A M M I T
12. Most companies just need to survive
13. N O T E V E RY A P P N E E D S T O W O R K O N 2 G O N A L O W - P O W E R P H O N E K N O W Y O U R A U D I E N C E
14. T H AT S A I D , T O D AY W E ’ R E TA L K I N G A B O U T 2 G O N L O W - P O W E R D E V I C E S
15. T E C H S P E E D 2 G 1 4 K b p s 3 G C D M A 1 4 4 K b p s 4 G LT E 1 0 0 , 0 0 0 K b p s G I G A B I T F I B E R 1 , 0 0 0 , 0 0 0 K b p s
17. R E M E M B E R B R O W S I N G T H E N E T O N T H I S ? 2 G I S S L O W E R
18. PA R T I C U L A R LY B E C A U S E T H E W E B C A N B E S O B L O AT E D N O W
19. Demo of LinkedIn.com taking about 90 seconds to load
20. Demo of treebo.com taking about 12 seconds to load
21. I F T H I S I S A C O M P E T I T I O N , B A N G A L O R E I S K I C K I N G S I L I C O N VA L L E Y ’ S
22. O K AY, I F E E L S U F F I C I E N T LY B A D W H AT D O I D O ?
24. Q U E S T I O N Y O U R F R A M E W O R K N A M E S I Z E ( K B ) 2 G T I M E ( S E C ) P R E A C T 3 . 5 0 . 1 1 7 V U E 2 1 . 3 0 . 7 1 R E A C T ( + D O M ) 3 0 . 5 1 . 0 2 A N G U L A R 5 9 . 8 1 . 9 9 E M B E R 1 4 4 . 2 4 . 8 1
26. C O M P I L E Y O U R C O D E T W I C E W I T H B A B E L • With modules • target: { esmodules: true } • <script type="module" src="./compiled-with-fewer-transformations.js"> • Without modules • target: { esmodules: false } • <script src="./compiled-with-all-the—transformations.js">
27. L E T ’ S T R E E S H A K E
34. T R E E S H A K I N G I S N O • (silver bullet, lol)
35. U S E B U I LT I N S
37. L O O S E M O D E
39. B U I L D U S I N G N O D E _ E N V = “ P R O D U C T I O N ”
40. C O D E S P L I T T I N G
41. S O U R C E M A P S
42. S C O P E H O I S T I N G
43. M O D U L E C O N C AT E N AT I O N P L U G I N
44. not scope hoisted scope hoisted Via Jeremias Menichelli at https://medium.com/webpack/brief-introduction-to-scope-hoisting-in-webpack-8435084c171f
46. I M A G E S K E L E T O N S
49. Source: https://codepen.io/jmperez/pen/oogqdp Demo of using SVGs to animate drawing of your loading image See CodePen in bottom right
50. Source: https://medium.freecodecamp.org/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c
51. You can cut out a lot of page weight with loading placeholders
52. 1 0 K B O R B U S T • Initial payload should be under 10KB • Invest time and effort into tuning your build. Many of these wins are free • Load no scripts and only the bare styles to get above the fold visuals • Using a script, load the rest in background • Use image skeletons, load real images later • Use code splitting to only get the code you need up front, delay the rest until later
53. aka.ms/voxxed Some tips and tricks for server-side and serverless performance
54. R E D U C E T T F B ( T I M E - T O - F I R S T- B Y T E )
55. S E R V E R T I M I N G S A P I Image credit: Paul Irish
56. C O M P R E S S Y O U R R E S P O N S E S
57. B R O T L I
58. L I N K E D I N ’ S P E R F O R M A N C E I N C R E A S E W I T H B R O T L I
60. C O L D S TA R T By Adam majewski (Based on the answer by Joachim Breitner on SO) [CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0)], via Wikimedia Commons
61. A Z U R E - F U N C T I O N - PA C K
62. T H E F U T U R E
65. A O T ( A H E A D - O F - T I M E C O M P I L AT I O N )
66. PA R T I A L E VA L U AT I O N
67. P R E PA C K
69. “ D I S A P P E A R I N G ” F R A M E W O R K S
70. Ivy
71. B I N A RY B Y T E C O D E
72. H A C K E R N E W S C L O N E N A M E 3 G T T I ( S E C ) 2 G T T I ( S E C ) P R E A C T 1 . 5 1 . 9 2 S V E LT E 2 . 2 2 . 5 R E A C T ( + D O M ) 2 . 0 9 2 . 5 7 G L I M M E R 2 . 8 1 4 . 1 2 A N G U L A R 3 . 2 4 . 3
73. T H A N K Y O U B R I A N H O LT — M I C R O S O F T — @ H O LT B T aka.ms/voxxed