动态导入

在本课中，我们将减少初始页面加载时从第三方库加载的 JavaScript 代码量。

Next.js 支持 ES2020 动态 `import()` 用于 JavaScript。借助它，您可以动态导入 JavaScript 模块并使用它们。它们也适用于服务器端渲染 (SSR)。

可以将动态导入视为另一种将代码拆分为可管理块的方式。

打开 `pages/index.js` 文件，并删除文件开头的这两个导入语句，因为我们将在稍后动态导入它们。

import Fuse from 'fuse.js';
import _ from 'lodash';

目前我们还需要删除

const fuse = new Fuse(countries, {
  keys: ['name'],
  threshold: 0.3,
});

现在我们已经删除了这段代码，让我们设置搜索输入以使用动态导入的库。

我们可以用以下代码替换输入

<input
  type="text"
  placeholder="Country search..."
  className={styles.input}
  onChange={async (e) => {
    const { value } = e.currentTarget;
    // Dynamically load libraries
    const Fuse = (await import('fuse.js')).default;
    const _ = (await import('lodash')).default;

    const fuse = new Fuse(countries, {
      keys: ['name'],
      threshold: 0.3,
    });

    const searchResult = fuse.search(value).map((result) => result.item);

    const updatedResults = searchResult.length ? searchResult : countries;
    setResults(updatedResults);

    // Fake analytics hit
    console.info({
      searchedAt: _.now(),
    });
  }}
/>

通过使用动态导入，这修复了页面加载时的“删除未使用的 JavaScript”问题。这也有助于改善我们的交互时间 (TTI)，从而有助于改善 首次输入延迟 (FID).

让我们在 Chrome DevTools 中运行另一个 Lighthouse 报告以查看我们的进度。