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

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

Presented at VoxxedDays Bucharest.

3994a1ac47c4a684d7378ef06c1571cd?s=128

Brian Holt

March 23, 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. I’m currently a cloud developer advocate for Microsoft Azure

  3. None
  4. None
  5. None
  6. None
  7. None
  8. Cities I’ve lived in

  9. None
  10. None
  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
  16. None
  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 ?
  23. None
  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
  25. None
  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
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  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

  36. None
  37. L O O S E M O D E

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

  45. None
  46. I M A G E S K E L E

    T O N S
  47. None
  48. None
  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
  59. None
  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

  63. None
  64. None
  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

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