如何减少 Next.js 中第一个加载页面的包大小？

Question

我的其中一个页面有一个非常大的包大小。

如何改进 Next.js 中页面的首次加载？

请看一下截图：

Answer 1

Nextjs 的最新版本支持 ES2020动态导入。

语法与传统的 import 语句有点不同，您应将next/dynamic 导入为

import dynamic from 'next/dynamic'

• 现在，使用默认导出

   const MyComponent= dynamic(() => import("../components/MyComponent"));
  

• 带命名导出

   const MyNamedComponent= dynamic(() => import('../components/MyNamedComponent').then((mod) => mod.MyNamedFunction))
  

现在，您可以像普通组件一样使用导入的组件。

此外，您还可以指定在动态组件加载时显示加载动画，并将其{ loading: () => <h2> Loading... </h2> }作为第二个参数传递给函数dynamic()，如下所示：

const MyComponentWithLoading = dynamic(() => import('../components/ComponentWithLoading'),{ loading: () => <h2>Loading...</h2> })

您可以在此处找到更多信息，Next.js 动态导入。

希望有帮助。干杯!

谢谢。