歡迎關注公衆号：n平方
如有問題或建議，請背景留言，我會盡力解決你的問題。
簡介
react-loadable官網最精簡的描述：
A higher order component for loading components with dynamic imports.
用于加載帶有動态導入的元件的高階元件。
React Loadable是一個小型庫，它使以元件為中心的代碼分割變得非常容易。
背景
當你的React應用，你把它和Webpack捆綁在一起，一切都很順利。但有一天你會注意到你的應用程式包變得如此之大以至于它會減慢速度。
是時候開始分解你的應用程式代碼了!
例如以下情景：
class Root extends React.Component {
render() {
return (
<Router>
<div>
<Route exact path="/" component={PCIndex}></Route>
<Route path="/details/:id" component={PCDetails}></Route>
</div>
</Router>
);
}
}
ReactDOM.render(
<Root />,
document.getElementById('app'));
在首頁直接加載了元件，如果很多的時候，那麼你的應用首屏展現的時候就會變得非常慢了。
react-loadable的作用由于路由隻是元件，我們仍然可以在路由級别輕松地進行代碼拆分。
在你的應用程式中引入新的代碼分割點應該是如此簡單，以至于你不會再三考慮。這應該是一個改變幾行代碼和其他一切都應該自動化的問題。
Loadable是一個高階元件(一個建立元件的函數)，它允許您在将任何子產品呈現到應用程式之前動态加載它。
概念
import()當您在Webpack 2+中使用import()時，它将自動為您分割代碼，而不需要額外的配置。
這意味着隻需切換到import()并使用React Loadable，就可以輕松地試驗新的代碼分割點。找出最适合你的應用程式的。
Loading…呈現靜态“Loading…”不能與使用者進行足夠的通信。您還需要考慮錯誤狀态、逾時，并使之成為一種良好的體驗。
Loadable用于在呈現子產品之前動态加載子產品的高階元件，在子產品不可用時呈現加載元件。
const LoadableComponent = Loadable({
loader: () => import('./Bar'),
loading: Loading,
delay: 200,
timeout: 10000,
});
允許并行加載多個資源的高階元件。
可加載的。地圖的選擇。加載器接受函數對象，并需要一個選項。渲染方法。
Loadable.Map({
loader: {
Bar: () => import('./Bar'),
i18n: () => fetch('./i18n/bar.json').then(res => res.json()),
},
render(loaded, props) {
let Bar = loaded.Bar.default;
let i18n = loaded.i18n;
return <Bar {...props} i18n={i18n}/>;
}
});
簡單使用
安裝
npm i react-loadable
import React from 'react'
import Loadable from "react-loadable"
let config = [
{
name: '/',
path: '/',
exact: true,
component: Loadable({
loader: () => import('../components/pc/pc_blog_content'),
loading: () => <div />
})
},
{
name: 'home',
path: '/home',
exact: true,
component: Loadable({
loader: () => import('../components//pc/pc_blog_content'),
loading: () => <div />
})
},
{
name: 'detail',
path: '/detail/:id',
exact: false,
component: Loadable({
loader: () => import('../components/pc/pc_article_detail'),
loading: () => <div />
})
},
{
name: 'timeline',
path: '/timeline',
exact: true,
component: Loadable({
loader: () => import('../components/pc/pc_timeline_index'),
loading: () => <div />
})
},
{
name: 'album',
path: '/album',
exact: true,
component: Loadable({
loader: () => import('../components/pc/pc_album_index'),
loading: () => <div />
})
},
{
name: 'message',
path: '/message',
exact: true,
component: Loadable({
loader: () => import('../components/pc/pc_message_index'),
loading: () => <div />
})
},
{
name: 'about',
path: '/about',
exact: true,
component: Loadable({
loader: () => import('../components/pc/pc_aboutme_index'),
loading: () => <div />
})
},
{
name: 'albumlList',
path: '/albumList/:id',
exact: false,
component: Loadable({
loader: () => import('../components/pc/pc_album_list'),
loading: () => <div />
})
}
]
export default config
結合react-router
import React from 'react';
import ReactDOM from 'react-dom';
import PCBlogIndex from './components/pc/pc_blog_index'
//這句就是引入react-loadable
import routers from './router/index';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Provider } from 'react-redux'
import configureStore from './store/configureStore'
const store = configureStore();
class Root extends React.Component {
render() {
return (
<Provider store={store}>
<Router>
<Switch>
<PCBlogIndex>
{/* 導入相關路由配置 */}
{routers.map((r, key) => <Route component={r.component} exact={!!r.exact} key={key} path={r.path} />)}
</PCBlogIndex>
</Switch>
</Router>
</Provider>
);
}
}
ReactDOM.render(
<Root />,
document.getElementById('app'));
總結
關于react-loadable伺服器渲染等更加進階操作可以參考官網https://github.com/jamiebuilds/react-loadable
至于普通的操作按上面兩步操作，結合官網的相關配置API，估計你能夠實作懶加載的功能了。
最後
如果對 Java、大資料感興趣請長按二維碼關注一波，我會努力帶給你們價值。覺得對你哪怕有一丁點幫助的請幫忙點個贊或者轉發哦。
