After production build my vue.js app, i saw that my chunk-vendors files are too big and this have an impact on web performance, screen below:

how to reduce size of this files?

I try to import ponent in my router.js via lazy loading but not help here, what is another solution to this problem?

thanks for any help!

After production build my vue.js app, i saw that my chunk-vendors files are too big and this have an impact on web performance, screen below:

how to reduce size of this files?

I try to import ponent in my router.js via lazy loading but not help here, what is another solution to this problem?

thanks for any help!

• javascript
• vue.js
• webpack

• 2 These are all of your node_modules which are notorious for being a blackhole. To reduce size you need to reduce dependencies in your node_modules – maxshuty Commented Mar 7, 2021 at 12:58
• 1 As maxshuty already wrote, you should make sure to use less node_modules. You can achieve this by reducing your package.json to the most essential. What you are experiencing is called dependency hell. you can read about it here: Wiki or here – wittgenstein Commented Mar 7, 2021 at 13:32

1 Answer 1

Further to the previous ments, you likely need to analyse what is being imported into your app.

A good way to do this is through a dependency analysis. If you're using vue-cli, you can add Webpack Bundle Analysis to your devDependencies. This will allow you to see what is being imported.

Pay special attention to things like icon libraries (like @mdi) and other helper libraries like @vueuse or lodash. If they're imported incorrectly, you can end up with the entire package rather than treeshaking out only the ones used.