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

結合react-router4
官網參考
https://reacttraining.com/rea...

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、大數據感興趣請長按二維碼關注一波，我會努力帶給大家價值。以爲對你哪怕有一丁點幫助的請幫忙點個贊或者轉發哦。