10 KB or Bust

10 KB or Bust

Presented for Concatenate

3994a1ac47c4a684d7378ef06c1571cd?s=128

Brian Holt

August 11, 2018
Tweet

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. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  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
  14. None
  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
  17. None
  18. None
  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 ?
  21. None
  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
  23. None
  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

  30. None
  31. None
  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

  34. None
  35. L O O S E M O D E

  36. None
  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

  43. None
  44. I M A G E S K E L E

    T O N S
  45. None
  46. None
  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
  57. None
  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

  61. None
  62. None
  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

  66. None
  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