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!
Share Improve this question asked Mar 7, 2021 at 12:42 markWankamarkWanka 7943 gold badges21 silver badges38 bronze badges 2-
2
These are all of your
node_modules
which are notorious for being a blackhole. To reduce size you need to reduce dependencies in yournode_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
Reset to default 3Further 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.