Question

我最近注意到，我的网站在首次加载时就遇到了一些主要的性能问题。进行一些挖掘后，我注意到这是由于我的应用程序加载了应用程序中的每个图像，即使不需要时也是如此。我以为我是用react lazy来解决这个问题的

import React, { lazy, Suspense } from 'react';

import { Route, Switch } from 'react-router-dom';

import { ProtectedRoute } from './components/ConditionalRoute';

import Spinner from './components/Spinner';

import ErrorBoundary from './pages/ErrorBoundaryPage';

import { routesPropTypes } from './App.proptypes';

const AboutPage = lazy(() => import('./pages/AboutPage'));
const HomePage = lazy(() => import('./pages/HomePage'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Collections = lazy(() => import('./pages/CollectionsPage'));
const Collection = lazy(() => import('./pages/CollectionPage'));
const Legal = lazy(() => import('./pages/LegalPage'));
const Faqs = lazy(() => import('./pages/FAQsPage'));
const EmailVerification = lazy(() => import('./pages/EmailVerificationPage'));
const Profile = lazy(() => import('./pages/ProfilePage'));
const Shop = lazy(() => import('./pages/ShopPage'));
const BuyProduct = lazy(() => import('./pages/ProductPage'));
const ArtistsPage = lazy(() => import('./pages/Artists'));
const ReviewsPage = lazy(() => import('./pages/Reviews'));
const PayPalTestPage = lazy(() => import('./pages/PayPalTestPage'));
const ResetPasswordPage = lazy(() => import('./pages/ResetPasswordPage'));
const ShippingGuidelines = lazy(() => import('./pages/ShippingGuidelines'));
const ContactPage = lazy(() => import('./pages/ContactPage'));
const SearchPage = lazy(() => import('./pages/SearchPage'));

const AppRoutes = ({ match }) => {
  return (
    <Suspense fallback={<Spinner />}>
      <Switch>
        <ErrorBoundary>
          <Route exact path="/" component={HomePage} />
          <Route exact path="/faqs" component={Faqs} />
          <Route exact path="/legal" component={Legal} />
          <Route exact path="/collections" component={Collections} />
          <Route path="/collections/:id" component={Collection} />
          <Route exact path="/shop" component={Shop} />
          <Route exact path="/shop/:category" component={Shop} />
          <Route exact path="/product/:id" component={BuyProduct} />
          <Route exact path="/artists/:id" component={ArtistsPage} />
          <Route exact path="/profile/:id" component={Profile} />
          <Route exact path="/reviews/:id" component={ReviewsPage} />
          <Route exact path="/about" component={AboutPage} />
          <Route exact path="/contact" component={ContactPage} />
          <Route exact path="/paypal" component={PayPalTestPage} />
          <Route exact path="/search/:name" component={SearchPage} />
          <Route
            exact
            path="/shipping-guidelines"
            component={ShippingGuidelines}
          />
          <Route
            exact
            path="/reset-password/:id"
            component={ResetPasswordPage}
          />
          <Route
            exact
            path="/email-verification/:id"
            component={EmailVerification}
          />
          {/* <Route path="/dashboard" component={Dashboard} /> */}
          {/* <Dashboard path="/dashboard" match={match} /> */}

          <ProtectedRoute path="/dashboard" redirect="/">
            <Dashboard match={match} />
          </ProtectedRoute>
        </ErrorBoundary>
      </Switch>
    </Suspense>
  );
};

AppRoutes.propTypes = routesPropTypes;

export default AppRoutes;

但是显然，懒惰反应只需要处理组件逻辑。任何帮助！我在下面发布了一些屏幕快照以及加载时间。

其中所有带有“ step”一词的图片都是完全不同的页面的一部分。

最好的问候，亚当！

Answer 1

react-lazyload软件包在这个问题上对我有很大帮助。它基本上是一种组件，其子项仅在其在视口中可见时才加载

反应一次加载所有图像

1 个答案: