Question

我在一个大型项目中使用Vue和Webpack，我希望优化某些组件的加载。我已经懒惰地加载页面了，但是我想知道是否可以进一步并动态地加载这些页面中的子组件。

我要在显示主组件（页面）后加载子组件（在下面的示例中为“ my-modal”）（以加快页面的加载时间）。该子组件相对较重，意味着要经常打开，但是默认情况下是隐藏的（它是模式的）。因此，我的策略是在页面加载后紧随其后加载，而不是随页面加载，这样可以更快地加载该页面。

我遇到了vue的Async Components，但不确定它是否能帮上忙，对吗？

以下是我在使用老式“静态”导入文件时所做的一个示例：

// page.vue

<script>
import myModal from "@/components/my-modal";

export default {
  components: {
    myModal,
  },
}
</script>

以下是我如何动态导入子组件（又称“异步组件”）的一个示例：

// page.vue

<script>
export default {
  components: {
    myModal: () => import("@/components/my-modal"),
  },
}
</script>

我正在本地注册组件（local registration），但是我不确定这是否是最好的方法，也许是另一个问题...

Answer 1

动态导入将生成一个新文件，并且只有在用户转到该特定页面时才会下载此新文件，而在用户转到/时不会下载。

这将提高加载速度，并减少用户在访问您的网站时必须下载的字节。

Answer 2

出于所有意图和目的……可能不是。

使用当今的现代设备，浏览器和Internet访问，该组件必须非常重要，才能总体上提高页面加载速度。如果仅仅是标记和代码，我很难相信一个组件甚至可以接近700Kb的大小（尤其是经过压缩和压缩）。在最糟糕的Internet连接之外，浏览器将毫无问题地处理此问题，尤其是如果该组件包含在该站点的主捆绑包中。

但是，如果您的组件在到达时做了一些繁重的 computational 工作，那么可能会加快异步加载速度（因为浏览器可以在等待时“继续”加载页面）到达的模式）。

但是但是，大多数浏览器一次只允许将多个XHR请求运行到单个域（我认为Chrome默认为4）。延迟加载文件意味着页面本身发出的请求将具有优先权，但是将更多文件加载到多个请求而不是集中到一个请求中，总体上可能会更慢。

但是但是但是，浏览器非常擅长缓存这些请求，因此以后访问您的网站可能不会遇到这个问题考虑。

当仅当用户需要访问站点的整个部分时（例如在路线上），才可以延迟加载站点的整个部分时，延迟加载模块确实可以提高速度。

最后的但是是好的做法，不要给浏览器和移动设备带来不必要的负担，并且在延迟加载该模块时可能不会引起明显注意速度差异，这可能是一个不错的主意，具体取决于您的需求和加载时间。如果访问者从不需要查看模式，而您在需要时加载模式...则要考虑很多事情，因为这可能会导致UI延迟，但对总体上更好的用户来说更好。

如果您想让互联网较差的人更容易访问您的网站，并且知道该模式将被频繁使用，则最好将其加载到页面中，因为它是页面功能的一部分。 / p>

异步组件会加快加载时间吗？

2 个答案: