块供应商文件在生产中太大

Question

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 component in my router.js via lazy loading but not help here, what is another solution to this problem?

thanks for any help!

Answer 1

Further to the previous comments, 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.