如何在React中在页面加载中调用并非所有组件
我当时正在开发一个React应用程序，最后我发现应用程序是否需要一些优化，而在我的例子中，这显然是大量的优化。
这段代码的当前性能分数是12%，如果我删除了导入和ofc中的几乎所有内容，而ofc没有使用这些内容，那么性能分数就会达到70%，所以我的问题是，在应用程序加载时，即使当组件被加载或呈现到特定路由时，也要加载所有组件，是否有任何机制可以在此点加载所需的内容，而不仅仅是在进入特定路由时加载组件！
关于如何优化当前代码，有什么建议吗？当前page是否加载所有组件，所以基本上每个页面加载上的所有javascript代码都是这样的？谢谢
回答 1
Stack Overflow用户
发布于 2020-04-29 14:34:34
回答你的问题：
，这是在应用程序加载的时候加载所有组件，甚至当我进入特定的路径时，组件应该被加载或呈现吗？所有这些都有反应吗？
是的，正如当前代码所示，您(没有反应)正在一次加载所有组件，这意味着您的包是巨大的！
是否有任何机制仅在此时加载所需的内容，而不只是在进入特定路由时加载组件！
是的，有一种叫做Code Splitting的模式，您告诉webpack创建较小的包，每个包用于每个路由，然后在用户导航到每个路由时加载每个包。
现在的代码分割相当简单(我记得在2009年手动进行过)
简而言之：
- 您需要在webpack中通过安装几个插件来实现代码分裂：
{
"presets": ["@babel/preset-react"],
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}您需要使用模块加载器来动态加载代码(https://github.com/smooth-code/loadable-components)
- Import加载器和加载动画组件.
。
import loadable from "@loadable/component";
import Loading from "./Loading.js"; // A spinner or something you want- Lazy加载组件，例如：
const MyProfileAsync = loadable(() => import("./modules/Applicant/Components/MyProfile"), {
fallback: <Loading />
});- 为您的模块
设置了路由
<Router>
<Route path="/" exact>
<MyProfileAsync />
</Route>
</Router>下面是指向使用react-router-dom：https://reacttraining.com/react-router/web/guides/code-splitting的指南的链接
https://stackoverflow.com/questions/61503804
复制相似问题
腾讯云开发者
