Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to Reduce Your Vue.JS Bundle Size with Webpack

How to Reduce Your Vue.JS Bundle Size with Webpack

The Vue build process will bundle your code for production. Are you shipping way too much code to your customers in your bundle? Learn how you can analyze your bundle size and see how Stanley Black & Decker reduced it by 50%.

Jennifer Bland

March 26, 2019
Tweet

More Decks by Jennifer Bland

Other Decks in Technology

Transcript

  1. How to Reduce Your Vue
    Bundle Size With Webpack
    Jennifer Bland

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. What is causing the
    large bundle size?

    View Slide

  10. View Slide

  11. View Slide

  12. Reduce Size of Lodash

    View Slide

  13. View Slide

  14. View Slide

  15. Reduce Size of Moment

    View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. Reduce Size of Vuetify

    View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. Reduce Size of vue-echarts

    View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. github.com/ratracegrad
    Jennifer Bland

    View Slide