react-lazyload-loader

react-lazyload-loader（v1.0.0）

---

该webpack loader主要目的是简化react开发过重中，异步组件加载问题，简化使用和操作。提升代码分离和打包机制，优化代码结构。 作者：老黑，群：126274877

功能及使用

• 异步分离和切割react组件；
• 依赖第三方组件 react-loadable（npm i react-loadable --save）；
• 可配置等待渲染组件；

    $ npm i react-lazyload-loader -D

---

webpack中使用方法

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: [
        {
            loader: 'babel-loader',
            options: {
                plugins: ['react-hot-loader/babel']
            }
        },
        {
            loader: ['react-lazyload-loader'],
            options: {
                loading: {
                    name: 'ComponentLoading',
                    path: 'components'
                }
            }
        }
    ]
}

业务代码中使用

 
import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
 
export default ({match}) => {
    return (
        <Switch>
            <Route path={`${match.url}/dashboard`} component={require('lazy|./pages/dashboard')}/>
            <Route path={`${match.url}/widgets`} component={require('lazy|./pages/widgets')}/>
            <Route path={`${match.url}/profile`} component={require('lazy|./pages/profile')}/>
            <Route component={() => (
                <Redirect push to="/app/dashboard"/>
            )}/>
        </Switch>
    )
};

需要在引入的组件路径前加 【lazy|】

中间等待组件的使用

tips：异步加载组件过程中，在弱网环境下，异步模块js加载失败或者加载缓慢，需要有等待状态和提示状态，来提醒前端页面；webpack loader options中有loading配置项；

参数 name 必须：等待组件名称； 参数 path 必须：等待组件存放路径； 组件写法

import React, {Component} from "react";
 
export default ({isLoading, error}) => {
    if (isLoading) {
        return <div>😆~~，Component is Loading.</div>;
    } else if (error) {
        return <div>😢~~，Sorry, there was a problem loading the page.</div>;
    } else {
        return <div>👽~~ <div/>;
    }
};
 

如：

loading: {
    name: 'ComponentLoading',
    path: 'components'
}

编译结果：import {ComponentLoading} from 'components';

path路径是相对你当前使用lazy组件加载的目录；或者node_modules，作者使用的是路径别名