【发布时间】：2021-10-06 22:33:43
【问题描述】：
我有一个next.js 的应用程序，我想进行代码拆分以减少我的捆绑包，以便按需加载页面。
但是我没有找到办法做到这一点，因为我不在乎我的路线。作为使用react-router 的示例，我们可以在路由上使用dynamic imports。
有人知道解决办法吗？
【问题讨论】：
标签： javascript reactjs typescript performance next.js
【发布时间】：2021-10-06 22:33:43
【问题描述】：
Next.js 在构建步骤中开箱即用地处理这个问题。
每个可以作为入口点存在的路由都将被构建为具有 First Load 版本和将由路由器加载的增量。
您可以通过运行 yarn build && yarn start 而不是 yarn dev 在本地尝试。
如果你仍然想拆分和动态加载你的 JS 的一部分，你可以查看 Next 的动态导入 https://nextjs.org/docs/advanced-features/dynamic-import
【讨论】：
您可以采取更多措施来提高 Next.js 的性能：
- 选择合适的渲染模式
- 延迟加载非关键脚本以在页面空闲时加载
- 使用图像组件进行图像优化
- 代码拆分客户端代码以减少初始包大小
- 使用 React Server 组件进行服务器端渲染（测试版）
- 使用 SWC 缩短构建时间
我在这里写了一篇关于此的文章，并提供了更多详细信息：https://szaranger.medium.com/improving-next-js-performance-6088a19395d
【讨论】：