通过代码拆分减少 JavaScript 载荷

Houssein Djirdeh

Jeremy Wagner

没有人喜欢等待。 如果网站的加载时间超过 3 秒，超过 50% 的用户会放弃访问。

发送较大的 JavaScript 载荷会显著影响网站的速度。请勿在应用的首页加载后立即将所有 JavaScript 发送给用户，而是将软件包拆分为多个部分，并仅在开始时发送必要的内容。

代码分块有何好处？

代码拆分是一种旨在最大限度地缩短启动时间的技术。通过在启动时提交较少的 JavaScript，我们可以最大限度地减少在此关键时期的主线程工作，从而让应用更快地实现交互。

在 Interaction to Next Paint (INP) 时间。原因在于，通过释放主线程，应用可以减少与 JavaScript 解析、编译和执行相关的启动开销，从而更快地响应用户输入。

根据您网站的架构（尤其是如果您的网站严重依赖于客户端呈现），缩减负责呈现标记的 JavaScript 载荷的大小可能会缩短 渲染该 LCP 元素，就可能会出现这种情况。这两种情况都可能会延迟网页的 LCP 时间。

测量

如果执行网页上的所有 JavaScript 需要花费大量时间，Lighthouse 会显示审核失败。

拆分 JavaScript 软件包，以便在用户加载应用时仅发送初始路线所需的代码。这样可以最大限度地减少需要解析和编译的脚本量，从而缩短网页加载时间。

您可以使用 动态导入拆分软件包。例如，请考虑以下代码段，其中展示了一个在表单提交时触发的 someFunction 方法示例。

import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  / uses moduleA
}

在这里，someFunction 使用从特定库导入的模块。如果此模块未在其他位置使用，则可以修改代码块，以便仅在用户提交表单时使用动态导入来提取该模块。

form.addEventListener("submit", e => {
  e.preventDefault();
  import('library.moduleA')
    .then(module => module.default) / using the default export
    .then(() => someFunction())
    .catch(handleError());
});

const someFunction = () => {
    / uses moduleA
}

构成模块的代码不会包含在初始软件包中，现在会延迟加载，或者仅在表单提交后需要时才提供给用户。如需进一步提升网页性能，请预加载关键分块，以便优先提取并更快提取它们。

虽然上一个代码段是一个简单的示例，但在大型应用中，延迟加载第三方依赖项并不是常见的模式。通常，第三方依赖项会拆分为单独的供应商软件包，因为它们的更新频率较低，因此可以缓存。您可以详细了解 SplitChunksPlugin 如何帮助您实现这一点。

使用客户端框架时，在路由或组件级别进行拆分是一种更简单的方法，可用于延迟加载应用的不同部分。许多使用 webpack 的热门框架都提供了抽象功能，可让您更轻松地实现延迟加载，而无需深入研究配置。