reactjs - 如何有条件地在反应路由器中导入组件

问题描述

目前我正在将我所有的组件导入到我的 App.js 文件中，然后使用反应路由器来制作看起来像这样的东西......

const App = () => {
    return(
        <Elements stripe={stripePromise}>
            <Router>
                <Banner />
                <Navbar />
                <Switch>
                    <UnPrivateRoute path="/" exact component={Home} />
                    <UnPrivateRoute path="/signup" exact component={Signup} />
                    <UnPrivateRoute path="/login" exact component={Login} />
                    <Route path="/contact-us" exact component={Contact} />
                    <Route path="/refund-policy" exact component={RefundPolicy} />
                    <Route path="/privacy-policy" exact component={PrivacyPolicy} />
                    <Route path="/terms-of-use" exact component={TermsOfUse} />
                    <PrivateRoute path='/dashboard' exact roles={['pro']} component={Dashboard} />
  
                    {/* ANOTHER 30 ROUTES */}...

                    <Route path="*" component={NoMatch} />
                </Switch><Footer />
            </Router>
        </Elements>
    )
}

我现在已经部署了我的应用程序，加载时间很糟糕，我的包大小约为 9MB，我正在尝试解决加载时间问题，因为它们导致我的“无法访问此网站”错误用户有时。

根据我的阅读，有没有办法有条件地导入这些组件，以便它们仅在用户访问相关页面时加载？这会显着增加我网站的初始加载时间吗？这些是我在网上看到的实现的方法，但我不确定是否是我需要的？

import("./math").then(math => {
  console.log(math.add(16, 26));
})

and 

<Route
  exact
  path="/"
  component={
    loading
    ? () => <div></div>
    : () => Home
  }
/>

and

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

这些都是我需要的吗？

标签： reactjsreact-router

懒加载！！您可以延迟加载组件。

这是相同的文档。

https://reactjs.org/docs/code-splitting.html

但是，您的 9MB 生产版本是可疑的。确保您正在为生产环境而不是开发环境构建。如果您的项目是使用 Create React Appnpm run build构建的，则会在项目的 build/ 文件夹中创建您的应用程序的生产版本。还要确保您的图像和其他媒体文件没有为此添加。有时我们使用图像作为获取，但我们需要为 Web 调整它们以减少渲染时间和包大小。

更新：

更新我的答案，以便对更多人有用。打开您的网站chrome并在developer tool开放Lighthouse中。在那里选择性能并生成报告。您可以查看所有建议以及可以改进的地方。在你的情况下有很多。

更新2

由于您有很多图像，因此延迟加载图像是一个好主意。您不能像延迟加载组件一样延迟加载图像。您可以创建一个单独的可重用组件来延迟加载图像。此链接可以帮助您朝着这个方向前进。

https://levelup.gitconnected.com/lazy-loading-images-in-react-for-better-performance-5df73654ea05

但是，如果您已经看到上次更新的屏幕截图，您仍然需要减小图像和 gif 的大小。

reactjs - 如何有条件地在反应路由器中导入组件

问题描述

解决方案

推荐阅读