React 优化:懒惰加载(lazy loading)

懒惰加载的目的是使网页首次加载变快,方法是将代码划分成若干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;
上一篇:将单链表的每K个结点逆序


下一篇:阿里云自助建站的方法---阿里云心选建站