reactjs - 什么时候在 NextJS 应用程序中使用可加载组件?

标签 reactjs performance next.js loadable-component

我正在努力提高我的网站性能,Google Chrome Lighthouse 告诉我为 ssr 使用可加载组件以“删除未使用的 javascript”。

我在文档中发现它似乎是一个具有对我的案例有用的功能的库,例如:组件拆分/加载库。

我的问题是:

  1. @loadable/component 真的有那么好吗?
  2. 如果它很好,我应该将它用于任何组件/库导入吗?

谢谢!

最佳答案

默认情况下,Next.js 将您的 JavaScript 拆分为每个路由的单独 block 。因此,当用户加载您的应用程序时,Next.js 仅发送初始路由所需的代码。

您可以使用内置的 next/dynamic 在组件级别通过代码拆分进一步优化加载过程

引用code splitting with dynamic imports了解更多详情。

关于reactjs - 什么时候在 NextJS 应用程序中使用可加载组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64674286/

相关文章:

javascript - 如何在我的 React 项目中包含外部模块的图像?

javascript - 使用ReactJS和map显示JSON多维数组数据

javascript - 在设定的时间后从 DOM 中删除元素

next.js - Nextjs 传递给路由器的 href 无效

javascript - ESLint : Failed to load config "next/babel" to extend from

javascript - 使用 CSS 模块的 Next.JS 无法按预期工作

reactjs - Hooks API - 在等待语句后设置状态时避免状态覆盖

python - 如何使用 numpy 从另一个具有修改元素的列表中创建列表

c# - 双向远程查找表,C#

html - 内页css文件的解决方案以获得更好的性能