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

我的其中一页的捆绑包尺寸非常大。

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

请看一下截图：

Nextjs 的最新版本支持 ES2020dynamic import.

语法与传统的 import 语句有点不同， 您应导入下一个/动态为

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 动态导入 https://nextjs.org/docs/advanced-features/dynamic-import.

希望有帮助。 干杯!

谢谢。