生产环境中的chunk-vendors文件过大

Question

生产环境中的chunk-vendors文件过大

javascriptvue.jswebpack

10

生产版本的 vue.js 应用程序构建完成后，我发现我的 chunk-vendors 文件太大了，这对于 Web 性能有影响，如下图所示：

如何减小这些文件的大小？

我尝试通过懒加载在 router.js 中导入组件，但这并没有帮助解决问题，还有其他解决方案吗？

感谢任何帮助！

- markWanka

2

这些都是你的 node_modules，它们以黑洞而著名。为了减小体积，你需要减少 node_modules 中的依赖项。 - maxshuty

1

如maxshuty所写，您应该确保使用更少的node_modules。您可以通过将package.json减少到最基本的内容来实现此目的。您正在经历的称为依赖地狱。您可以在此处阅读有关它的信息：[Wiki]（https://en.wikipedia.org/wiki/Dependency_hell）或[此处]（https://blog.appsignal.com/2020/04/09/ride-down-the-javascript-dependency-hell.html） - wittgenstein

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- floodlitworld · Accepted Answer

根据之前的评论，你可能需要分析导入到你的应用程序中的内容。

一种好的方法是通过依赖分析来实现。如果你正在使用 vue-cli，可以将 Webpack Bundle Analysis 添加到你的 devDependencies 中。这将允许你看到正在被导入的内容。

特别注意像图标库（如@mdi）和其他辅助库（如@vueuse或lodash）这样的东西。如果它们被错误地导入，你可能会得到整个包而不是只摇树出只使用的部分。