标签：lazy loading QuoteDetail React import pages 加载

懒惰加载的目的是使网页首次加载变快，方法是将代码划分成若干chunk, 用户最不可能访问到的页面优先使用 lazy loading, 根据访问到的路径实时按需加载相应的代码。这样，用户不需要一开始就下载大量的代码，因为其中一些代码可能不需要用到。

1. import React, { Suspense } from "react";

导入Suspense组件的目的是，提供按需加载时的UI fallback，即过渡画面，因为加载需要时间，不使用 Suspense React 会报错。

2. 修改 import 语句

例如:
import QuoteDetail from "./pages/QuoteDetail";
改为：
const QuoteDetail = React.lazy(() => import("./pages/QuoteDetail"));

这些这样修改的组件是假定用户访问的可能性不高的页面，用户访问的可能性越低，使用懒惰加载的价值就越大。

3. App.js 中，将全部路由 wrap 在 Suspense 组件中，Suspense 需要加 fallback 属性，提供加载时的过渡画面。

只需要这3步就可实现懒惰加载，对于小的App来说，使用懒惰加载只是一个可选项，可使用可不使用。但对于大型App，懒惰加载的优势会得到极大的体现。

完整的代码例子如下：

import React, { Suspense } from "react";
import { Route, Switch, Redirect } from "react-router-dom";
// import AllQuotes from "./pages/AllQuotes";
// import QuoteDetail from "./pages/QuoteDetail";
// import NewQuote from "./pages/NewQuote";
import Layout from "./components/layout/Layout";
// import NotFound from "./pages/NotFound";
import LoadingSpinner from "./components/UI/LoadingSpinner";

const NewQuote = React.lazy(() => import("./pages/NewQuote"));
const QuoteDetail = React.lazy(() => import("./pages/QuoteDetail"));
const NotFound = React.lazy(() => import("./pages/NotFound"));
const AllQuotes = React.lazy(() => import("./pages/AllQuotes"));

function App() {
  return (
    <Layout>
      <Suspense
        fallback={
          <div className="centered">
            <LoadingSpinner />
          </div>
        }
      >
        <Switch>
          <Route path="/" exact>
            <Redirect to="/quotes" />
          </Route>
          <Route path="/quotes" exact>
            <AllQuotes />
          </Route>
          <Route path="/quotes/:quoteId">
            <QuoteDetail />
          </Route>
          <Route path="/new-quote">
            <NewQuote />
          </Route>
          <Route path="*">
            <NotFound />
          </Route>
        </Switch>
      </Suspense>
    </Layout>
  );
}
export default App;

标签：lazy,loading,QuoteDetail,React,import,pages,加载
来源： https://blog.csdn.net/ftell/article/details/122791605

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。