react-loadable懶載入
歡迎關注公眾號：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
允許並行載入多個資源的高階元件。
可載入的。地圖的選擇。載入器接受函式物件，並需要一個選項。渲染方法。
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
懶載入配置/router/index.js
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
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/jamiebuild...
至於普通的操作按上面兩步操作，結合官網的相關配置API，估計你能夠實現懶載入的功能了。
最後
如果對 Java、大資料感興趣請長按二維碼關注一波，我會努力帶給你們價值。覺得對你哪怕有一丁點幫助的請幫忙點個贊或者轉發哦。
