组件的动态导入

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

React 组件也可以使用动态导入进行导入，但在这种情况下，我们结合使用 next/dynamic 来确保它的工作方式与任何其他 React 组件一样。

我们将使用此方法延迟加载我们的模态，其中包含 Hello World 代码示例。通过这样做，我们还从初始页面加载中删除了另外两个第三方库。

打开 pages/index.js 文件，并在文件开头添加 dynamic 的导入语句， 它来自 next/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，并且不会影响网站性能。