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%.

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