The generated app is too big on vue-cli 4

I’m creating a PWA Vue app in Typescript with Vuetify, when generating the dist with ‘npm run build’ the app size is already reaching 4MB !!!

This is normal ?

I’m creating components loaded in lazy loading mode, I noticed that when separating part of a code for a component loaded in lazy loading, practically 1MB (!?!) was added to the final package

I don’t think I have many third-party dependencies, to influence that, I didn’t make changes to the webpack, basically I’m using the standard app base with typescript with the addition of Vuetify and Vuex.

Follow my package.json


If you can guide me and help me, I will be very grateful …

Is it a 4mb production build or dev build?

When you run a build you can also use the --report flag to help you analyze the size of your modules: https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-build

The packages that are in your dependencies don’t create a 4MB bundle. I would suspect that you create a development bundle by accident, which includes all of the code from webpack for hot module reloading etc. - maybe you have set NODE_ENV=development in your system’s terminal permanently

1 Like

Wow, it could really be that …
I thought that there was no need to specify ENV_NODE, when reading the documentation I had the idea that when running ‘npm run building’ the production mode would be set automatically by default

guys, I discovery out the problem…

the vue cli is configured by default to generate source maps, that’s why the app becomes so big!

I just added this property productionSourceMap: false on vue config.js
and the problem was corrected.

thank you all!