时间戳

首页 > 解决方案 > 如何在 React App 中的页面加载时不调用所有组件

javascript - 如何在 React App 中的页面加载时不调用所有组件

问题描述

我正在开发一个 React 应用程序，最后指出检查应用程序是否需要一些优化，在我的情况下，这显然是很多优化。

此代码的当前性能得分为 12%，如果我从导入中删除了几乎所有内容并且不使用这些组件，则性能得分将达到 70%，所以我的问题是当应用程序加载时加载所有组件时组件是应该仅在我转到特定路线时才加载或呈现，React 是否会加载所有这些，是否有任何机制可以仅加载此时需要的内容，而不仅仅是在前往特定路线时加载组件！

关于如何优化当前代码的任何提示？当前的 impl 是否加载所有组件，所以基本上每个页面加载的所有 javascript 代码？谢谢

标签： javascriptreactjsperformance

解决方案

回答您的问题：

这是在加载应用程序时加载所有组件吗？组件应该仅在我转到特定路线时才加载或呈现？React 会加载所有这些吗？

是的，正如当前代码的样子，你（没有反应）一次加载所有组件，这意味着你的包是巨大的！

是否有任何机制可以仅加载此时需要的内容，而不仅仅是在前往特定路线时加载组件！

是的，有一种模式叫做Code Splitting你告诉 webpack 创建更小的包，每个包用于每个路由，然后在用户导航到每个路由时加载每个包。

现在代码拆分相当简单（我记得在 2009 年手动执行此操作）

简而言之：

  1. 您需要通过安装几个插件在 webpack 中启用代码拆分：
{
  "presets": ["@babel/preset-react"],
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

  1. 您需要使用模块加载器来动态加载代码（https://github.com/smooth-code/loadable-components）

  2. 导入加载器和加载动画组件。

import loadable from "@loadable/component";
import Loading from "./Loading.js"; // A spinner or something you want
  1. 延迟加载您的组件，例如：
const MyProfileAsync = loadable(() => import("./modules/Applicant/Components/MyProfile"), {
  fallback: <Loading />
});
  1. 为您的模块设置路线
<Router>
  <Route path="/" exact>
    <MyProfileAsync />
  </Route>
</Router>

这是使用指南的链接react-router-dom：https ://reacttraining.com/react-router/web/guides/code-splitting

推荐阅读