SEO: 组件的动态导入 | Next.js 简体中文

接下来，让我们关注那些不需要在初始页面加载时使用的 React 组件。

React 组件同样可以通过动态导入方式加载，但这里我们需要结合 next/dynamic 使用，以确保它能像普通 React 组件一样工作。

我们将使用这种方法来延迟加载包含 Hello World 代码示例的模态框。通过这种方式，我们还能从初始页面加载中移除另外两个第三方库。

打开 pages/index.js 文件，在文件开头添加从 next/dynamic 导入 dynamic 的语句：

import dynamic from 'next/dynamic';

同时删除这行代码：

import CodeSampleModal from '../components/CodeSampleModal';

现在可以通过以下方式将其作为动态组件导入（添加在文件开头）：

const CodeSampleModal = dynamic(() => import('../components/CodeSampleModal'), {
  ssr: false,
});

CodeSampleModal 将成为 ../components/CodeSampleModal 返回的默认组件。它的行为与常规 React 组件一致，可以像往常一样向其传递 props。

由于我们不需要在服务端渲染该组件，我们使用 ssr: false 来禁用它。

接下来，我们希望延迟加载该组件，直到用户需要时才加载。为此，我们可以将组件包裹在条件判断中，检查模态框是否应该打开，如果是则加载该组件。

按如下方式包裹 CodeSampleModal 组件：

{
  isModalOpen && (
    <CodeSampleModal
      isOpen={isModalOpen}
      closeModal={() => setIsModalOpen(false)}
    />
  );
}

现在，当 isModalOpen 首次被切换为 true 时，才会请求所需的 JavaScript 资源。

经过这些优化后，核心性能指标应该会有所改善。让我们在 Chrome DevTools 中再次运行 Lighthouse 报告来验证。

现在只剩下两个优化建议：

组件的动态导入