Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Performance optimization of vue.js apps with modern js

1,466 views

Published on

Presentation from Vuej.s Amsterdam

Published in: Internet
  • Be the first to comment

Performance optimization of vue.js apps with modern js

  1. 1. Performance Optimization of Vue.js Apps with modern JS Filip Rakowski @filrakowski
  2. 2. Filip Rakowski Co-founder Frontend Developer Community partner @filrakowski
  3. 3. Let’s talk about Performance! *but not rendering performance, it’s a huge topic and they gave me only 25 minutes ;( @filrakowski
  4. 4. Why performance is important? @filrakowski
  5. 5. @filrakowski
  6. 6. 2.2 sec load time reduction resulted in 15.4% more downloads Firefox @filrakowski
  7. 7. 1s slowdown resulted in 11% less page views Aberdeen Group @filrakowski
  8. 8. 2 sec delay resulted in 4.3% loss in revenue per visitor and 3.75% reduction in clicks Bing @filrakowski
  9. 9. cutting page load time half resulted in 13% increase in sales AutoAnything @filrakowski
  10. 10. SPEED = MONEY @filrakowski
  11. 11. What influences loading time performance? @filrakowski
  12. 12. Request / Response @filrakowski
  13. 13. Request / Response Parsing @filrakowski
  14. 14. Request / Response Parsing Execution @filrakowski
  15. 15. Request / Response Parsing Execution @filrakowski
  16. 16. Let’s make an app! @filrakowski
  17. 17. main.jsApp.vue Vue @filrakowski
  18. 18. main.jsrouter.js Vue @filrakowski Home.vue About.vueLodash vue-router app.js App.vue
  19. 19. every new module or library = bigger bundle @filrakowski
  20. 20. bigger bundle = longer download @filrakowski
  21. 21. bigger bundle = longer parsing @filrakowski
  22. 22. bigger bundle = longer execution @filrakowski
  23. 23. SPEED = MONEY @filrakowski
  24. 24. MORE FEATURES = LESS MONEY? @filrakowski
  25. 25. @filrakowski
  26. 26. How webpack bundling works? @filrakowski
  27. 27. Dependency graph is a graph of modules in your application. Starting from entry point webpack is recursively adding all imported modules to the graph and bundles them into (usually) one file. @filrakowski
  28. 28. main.jsrouter.js Vue @filrakowski Home.vue About.vueLodash vue-router App.vue
  29. 29. main.jsrouter.js Vue @filrakowski Home.vue About.vueLodash vue-router App.vue
  30. 30. main.jsrouter.js Vue @filrakowski Home.vue About.vueLodash vue-router App.vue
  31. 31. main.jsrouter.js Vue @filrakowski Home.vue About.vueLodash vue-router App.vue
  32. 32. main.jsrouter.js Vue @filrakowski Home.vue About.vueLodash vue-router App.vue
  33. 33. main.jsrouter.js Vue @filrakowski Home.vue About.vueLodash vue-router App.vue app.js
  34. 34. main.jsrouter.js Vue @filrakowski Home.vue About.vueLodash vue-router app.js App.vue We might not need this!
  35. 35. Code splitting allows you to split your code into various bundles. You can think about this as deferring a piece of your dependency graph to be loaded later. @filrakowski
  36. 36. Lazy loading loading chunk of code on demand usually as a response to user action. @filrakowski
  37. 37. Dynamic import @filrakowski
  38. 38. @filrakowski
  39. 39. main.jsrouter.js Vue @filrakowski Home.vue About.vueLodash vue-router app.js App.vue home.js about.js
  40. 40. Nuxt is doing per-route code-splitting out of the box! @filrakowski
  41. 41. Rule #1 - Split your code per route @filrakowski
  42. 42. What else we don’t need on initial download? @filrakowski
  43. 43. @filrakowski
  44. 44. @filrakowski
  45. 45. Rule #2 - Load off-screen components lazily @filrakowski
  46. 46. @filrakowski You can use v-if to lazily load off-screen components
  47. 47. What else? @filrakowski
  48. 48. Rule #3 - Load non-critical libraries lazily @filrakowski
  49. 49. @filrakowski
  50. 50. Rule #4 - Avoid bundling all 3rd party libs into one file. It’s an anti-pattern. @filrakowski
  51. 51. main.jsrouter.js Vue @filrakowski Home.vue About.vueLodash vue-router vendor.js App.vue
  52. 52. main.jsrouter.js Vue @filrakowski Home.vue About.vueLodash vue-router vendor.js App.vue We might not need this!
  53. 53. What about code duplication? @filrakowski
  54. 54. main.jsrouter.js Vue @filrakowski Home.vue About.vueLodash vue-router app.js App.vue home.js about.js Lodash
  55. 55. main.jsrouter.js Vue @filrakowski Home.vue About.vueLodash vue-router app.js App.vue home.js about.js Lodash
  56. 56. @filrakowski
  57. 57. Rule #5 - Choose your libraries carefully and try to find smaller equivalents if possible @filrakowski
  58. 58. @filrakowski
  59. 59. @filrakowski
  60. 60. @filrakowski
  61. 61. Request / Response Parsing Execution @filrakowski
  62. 62. Rule #5 - Make use of cache for static assets @filrakowski
  63. 63. Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They can be used to serve network responses from cache instead of a network. @filrakowski
  64. 64. Service Worker Network @filrakowski Client app
  65. 65. Service Worker Network @filrakowski Client app Cache If asset was previously downloaded If asset is not in cache or needs to be „fresh”
  66. 66. Vue CLI PWA plugin @filrakowski
  67. 67. @filrakowski
  68. 68. Nuxt PWA module @filrakowski
  69. 69. @filrakowski
  70. 70. @filrakowski
  71. 71. What else we can do? @filrakowski
  72. 72. Prefetching downloading assets before they’re requested. @filrakowski
  73. 73. Rule #6 - Prefetch lazily loaded resources @filrakowski
  74. 74. @filrakowski
  75. 75. More general options webpack precachePlugin workbox-webpack-plugin @filrakowski
  76. 76. Vue-cli 3 is prefetching lazy chunks out of the box! @filrakowski
  77. 77. Don’t forget about compression, minification and other stuff that webpack and DevOps will do for you @filrakowski
  78. 78. Measuring and analyzing @filrakowski
  79. 79. #1 Dev tools “coverage” tool @filrakowski
  80. 80. @filrakowski CMD + Shift + P “Coverage”
  81. 81. @filrakowski Everything marked with red should probably be loaded lazily
  82. 82. #2 Webpack bundle analyzer @filrakowski
  83. 83. @filrakowski
  84. 84. @filrakowski
  85. 85. #2 ‘bundlesize’ package @filrakowski
  86. 86. @filrakowski
  87. 87. @filrakowski
  88. 88. #3 VS Code ‘Import cost’ plugin @filrakowski
  89. 89. @filrakowski
  90. 90. Thank you! If you already forgot something - don’t worry. I’ll share the slides :) @filrakowski

×