使用 next.js 提高应用程序的性能

Question

我有一个带有

next.js

的应用程序，我想进行代码拆分以减少我的包，以便按需加载页面。

但是我没有找到一种方法来做到这一点，因为我不关心我的路线。作为使用

react-router

的示例，我们可以在路线上使用

dynamic imports

。

有人知道这个问题的解决办法吗？

Answer 1

Next.js 在构建步骤中开箱即用地处理这个问题。

可以作为入口点存在的每个路由都将被构建为具有First Load版本和将由路由器加载的增量。

您可以通过运行

yarn build && yarn start

而不是

yarn dev

在本地尝试此操作。

如果你仍然想拆分并动态加载 JS 的各个部分，可以查看 Next 的动态导入 https://nextjs.org/docs/advanced-features/dynamic-import

Answer 2

您还可以采取其他一些措施来提高 Next.js 性能：

1. 选择正确的渲染模式
2. 推迟加载非关键脚本以在页面空闲时加载
3. 使用图像组件进行图像优化
4. 代码分割客户端代码以减少初始包大小
5. 使用 React Server 组件进行服务器端渲染（Beta）
6. 使用 SWC 缩短构建时间

我在这里写了一篇有关此内容的文章，其中包含更多详细信息： https://medium.com/@szaranger/improving-next-js-performance-ad4a05c81888