懒惰加载的目的是使网页首次加载变快,方法是将代码划分成若干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;