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;