在 Vue 单页应用程序中实现延迟加载的原因？ [关闭]答案

【问题标题】：Reasons to implement lazy loading in a Vue Single Page Application? [closed]在 Vue 单页应用程序中实现延迟加载的原因？ [关闭]
【发布时间】：2020-11-13 21:54:51
【问题描述】：

我知道延迟加载会缩短 SPA 中的初始加载时间，但如果我使用 Vue-router、Vuex 和许多组件，我会从 Vue 应用程序中获得多少实际好处。

延迟加载 Vue SPA 的性能优势是否接近于缩小和捆绑代码（在我的例子中，使用 gulp）？

我知道，如果我在嵌套页面中上传数百 MB 的媒体内容，初始加载时间优势就会存在，但我想知道是否需要一个通用用例。

感谢所有答案。

【问题讨论】：

这是非常主观的，但如果您的应用具有不同受众群体访问的区域或部分，那么您可以减少每个区域或部分的初始加载时间，但会在导航时以非常小的延迟为代价（并且仅第一次访问某个地区时）。另外，当 Vue CLI 框架为你设置 Webpack 时，你到底为什么要使用 Gulp？
感谢@phil 的回答，我目前使用 Gulp，因为它是我为雇主工作的代码库的一部分。当你提到高度主观的时候，你能告诉我为什么有人会强烈反对你吗？除了首先设置延迟加载的复杂性（学习如何做）。
对应用的目的、受众、对加载时间的期望等主观判断

标签： vue.js lazy-loading vuex single-page-application vue-router

【解决方案1】：

我工作的团队仅在需要时才使用它来加载大型外部 JavaScript 包。

想象一个项目有五个 javascript 可视化库，每个 1Mb，但主页只是一个普通的文档，全是文本。我们不想让只是在这里阅读我们网站文本更新的访问者在不使用 three.js、plotly 等的情况下加载它们。

Webpack 也 supports lazy loading，因此您仍然可以在延迟加载时进行压缩和打包。设置只是一些额外的工作，调试变得有点困难。

我不能说您的应用程序会获得多少好处，但它在嵌套网站中对我们来说效果很好（我们将初始捆绑包大小减少了一半）。我会检查页面加载时需要哪些 Mb 中的捆绑包部分，因为您将在那里节省大量资金。

免责声明：我不是这个主题的专家，只是分享我在去年开发一个性能问题的大型网络应用程序的经验

【讨论】：

感谢@Jesse 提供的信息，尤其是加载时间减半的结果