SEO：动态导入 | Next.js 简体中文

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

Next.js 支持 ES2020 的动态 import() 功能。通过它，你可以动态导入 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;
    // 动态加载库
    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);
 
    // 模拟分析数据
    console.info({
      searchedAt: _.now(),
    });
  }}
/>

通过使用动态导入，我们解决了页面加载时"移除未使用的 JavaScript"的问题。这也改善了我们的可交互时间 (TTI)，有助于提升首次输入延迟 (FID)。

让我们在 Chrome DevTools 中再次运行 Lighthouse 报告来查看进展。

动态导入

延伸阅读

On this page