DEV Community

Cover image for How to Reduce Your Vue.JS Bundle Size With Webpack

How to Reduce Your Vue.JS Bundle Size With Webpack

Jennifer Bland on July 24, 2019

I work on the Industry 4.0 team at Stanley Black & Decker. Our team recently created the equivalent of an App Store for Stanley’s manufacturing...
Collapse
 
studnitz profile image
Alexander von Studnitz

Good article! Another thing to consider is using date-fns instead of moment.js and to look into async components if you for example only need some chart library, when you scroll into view or if it's on a certain route.

Collapse
 
ratracegrad profile image
Jennifer Bland

Believe me I have tried to convince them to switch to date-fns but so far no go.

Collapse
 
dimazz profile image
dimazz

Thank you very much for this article! It helped me to save around 200kb on momentjs.

I tried to do the same with vue-lottie, but it looks more complicated, because one npm package refers to another and in order fix it, I need change contents of npm package - that will be rewritten on update or if I will run mpm install on other comp. And I am just green noob at coding πŸ™„

npmjs.com/package/vue-lottie

Collapse
 
ratracegrad profile image
Jennifer Bland

Glad it could help you save size in your application. I am not familiar with vue-lottie.

Collapse
 
buinauskas profile image
Evaldas Buinauskas

Is it a really a good idea to import straight from src of a library? I understand it reduces bundle size but this imports from internal code.

Collapse
 
ratracegrad profile image
Jennifer Bland

The creators of these libraries provide instructions on how to get a smaller version of their product and that is what we implemented.

Collapse
 
ratracegrad profile image
Jennifer Bland

Thanks for sharing!