组件的动态导入

接下来，让我们关注一个在初始页面加载时不需要的 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 报告来验证。

我们还剩下这两个优化建议

• 使用 HTTP2：要解决这个问题，我们可以部署到支持 HTTP2 的地方（例如 Vercel）。
• 图像元素没有明确的 width 和 height：这实际上是 Lighthouse 中的一个 bug，并不会影响网站性能。

延伸阅读

• Next.js: 动态导入文档