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

Question

在生产构建我的 vue.js 应用程序后，我发现我的块供应商文件太大，这对 web 性能有影响，屏幕如下：

如何减小此文件的大小？

我尝试通过延迟加载在我的 router.js 中导入组件但在这里没有帮助，这个问题的另一种解决方案是什么？

谢谢你的帮助！

Answer 1

除了前面的评论，您可能需要分析导入到您的应用程序中的内容。

执行此操作的一个好方法是通过依赖性分析。 如果您使用的是 vue-cli，则可以将Webpack Bundle Analysis添加到您的 devDependencies。 这将允许您查看正在导入的内容。

特别注意图标库（如@mdi）和其他辅助库（如@vueuse 或 lodash）。 如果它们导入不正确，您最终可能会得到整个 package，而不是仅使用 treeshaking。