组件的动态导入

接下来，让我们关注一个在初始页面加载时不需要的 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 中的一个错误，并且不影响网站性能。

延伸阅读

• Next.js: 动态导入文档