延迟加载 - 它何时下载块文件？

Posted 2023-02-16

【中文标题】延迟加载 - 它何时下载块文件？

【英文标题】：lazy loading - when does it download chunk files?

【发布时间】：2019-12-20 21:09:23

【问题描述】：

我正在使用 vue.js 。例如，我想对路由使用延迟加载。

假设我通过触发 (npm run build) 使用 webpack 构建了项目。

然后，随着webpack 开始构建，它将分别生成所有chunks。

问题：据说在使用惰性路由时，只会在我们将在哪个路由上加载那个js文件。正确的？如果是这样，当移动到另一条路线时，应该加载另一个块 js 文件。这块从哪里来？

来自服务器？如果是这样，我们就完全失去了SPA的意义，因为 对于每一个路由变化，我们去服务器询问必要的js 文件。 如果不是从服务器，那么我们第一次下载的时候就已经下载了 加载页面。如果是这样，为什么拆分它是个好主意 如果第一页加载仍然需要下载所有 块？

【问题讨论】：

从服务器加载。但是为什么你认为你失去了 SPA 的意义呢？

SPA 具有强大的功能之一。您的第一次加载时间很慢，但是当移动到路由时，它非常快，因为您不会向服务器发出请求。这就是为什么。

我明白了。块最初是从服务器加载的，但随后可以被缓存。为了减轻缓慢的初始加载，可以使用一些技术，例如使用Intersection Observer API 来检测链接何时进入视图并开始在后台加载块，以便当您实际单击链接时块已经可用.

感谢@HusamIbrahim 的回答；）

【参考方案1】：

它将从服务器下载，但您不会失去所有 SPA 优势，因为其他块可以在停留在初始页面时预加载。那是从初始块渲染的。 如果你想快速，你不能一次从服务器加载所有内容。您仍然需要与服务器通信。 SPA 的重点更多是摆脱重新下载 html/css/js 样板文件，并专注于为应用程序提供新数据（以及您的案例中的视图和逻辑）。