10 KB or Bust

Presented for Concatenate

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
9. W E ’ R E T RY I N G O U R B E S T, D A M M I T
10. Most companies just need to survive
11. 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
12. 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
13. 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
15. 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
16. 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. I F T H I S I S A C O M P E T I T I O N , A S I A A N D A F R I C A A R E K I C K I N G S I L I C O N VA L L E Y ’ S
20. 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 ?
22. 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 . 4 0 . 7 1 R E A C T ( + D O M ) 3 1 . 4 1 . 0 4 7 A N G U L A R 6 1 . 9 2 . 0 6
24. 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">
25. L E T ’ S T R E E S H A K E
26. Theme: aka.ms/night-owl Font: dank.sh
27. Theme: aka.ms/night-owl Font: dank.sh
28. Theme: aka.ms/night-owl Font: dank.sh
29. Theme: aka.ms/night-owl Font: dank.sh
32. T R E E S H A K I N G I S N O • (silver bullet, lol)
33. U S E B U I LT I N S
35. L O O S E M O D E
37. 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 ”
38. C O D E S P L I T T I N G
39. S O U R C E M A P S
40. S C O P E H O I S T I N G
41. M O D U L E C O N C AT E N AT I O N P L U G I N
42. not scope hoisted scope hoisted Via Jeremias Menichelli at https://medium.com/webpack/brief-introduction-to-scope-hoisting-in-webpack-8435084c171f
44. I M A G E S K E L E T O N S
47. Source: https://codepen.io/jmperez/pen/oogqdp
48. Source: https://medium.freecodecamp.org/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c
49. You can cut out a lot of page weight with loading placeholders
50. 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
51. aka.ms/concatenate
52. 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 )
53. S E R V E R T I M I N G S A P I Image credit: Paul Irish
54. C O M P R E S S Y O U R R E S P O N S E S
55. B R O T L I
56. 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
58. 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
59. A Z U R E - F U N C T I O N - PA C K
60. T H E F U T U R E
63. A O T ( A H E A D - O F - T I M E C O M P I L AT I O N )
64. PA R T I A L E VA L U AT I O N
65. P R E PA C K
67. “ D I S A P P E A R I N G ” F R A M E W O R K S
68. Ivy
69. B I N A RY B Y T E C O D E
70. 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
71. 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 Functions: aka.ms/concatenate Theme: aka.ms/night-owl Font: dank.sh