反应图像一次加载

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;

但显然 react lazy 只处理组件逻辑。任何帮助！我在下面发布了一些加载时间的屏幕截图。

所有带有“步骤”一词的图片都属于完全不同的页面。

此致，亚当！

Answer 1

软件包 react-lazyload 对我解决这个问题帮助很大。它基本上作为一个组件工作，它的子组件仅在它们在视口内可见时才加载

反应图像一次加载

React images loading all at once

reactjs

react-router

react-lazy-load