react-router v4 按需載入的配置方法

在react項目開發中，當訪問預設頁面時會一次性請求所有的js資源，這會大大影響頁面的載入速度和用戶體驗。所以添加按需載入功能是必要的，以下是配置按需載入的方法：

安裝bundle-loader

 npm install --save-dev bundle-loader

定義Bundle.js

import React, { Component } from 'react';
    export default class Bundle extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                // short for "module" but that's a keyword in js, so "mod"
                mod: null
            }
        }

        componentWillMount() {
            this.load(this.props)
        }

        componentWillReceiveProps(nextProps) {
            if (nextProps.load !== this.props.load) {
                this.load(nextProps)
            }
        }

        load(props) {
            this.setState({
                mod: null
            })
            props.load((mod) => {
                this.setState({
                    // handle both es imports and cjs
                    mod: mod.default ? mod.default : mod
                })
            })
        }

        render() {
            if (!this.state.mod)
                return false
            return this.props.children(this.state.mod)
        }
    }

app.jsx配置

import React from 'react';
    import ReactDOM from 'react-dom';
    import { HashRouter, Route } from 'react-router-dom';
    import * as routePaths from './js/constants/routePaths';
    import Bundle from './js/constants/Bundle.js';
    //預設打開頁面直接引入
    import Index from './js/pages/Index';
    //其他頁面非同步引入
    import CardContainer from 'bundle-loader?lazy&name=app-[name]!./js/pages/Card';
    import './assets/css/index.scss';

    const Card = () => (
        <Bundle load={CardContainer}>
            {(Card) => <Card />}
        </Bundle>
    )

    ReactDOM.render((
        <HashRouter>
            <div className="container">
                <Route path={routePaths.INDEX} exact component={Index} />
                <Route path='/card' component={Card} />
            </div>
        </HashRouter>
        ),
        document.getElementById('app')
    );

webpack.config.js 修改

 webpackConfig.output = {
        path: path.resolve(__dirname, 'build/' + config.ftpTarget),
        publicPath: config.publicPath + '/',
        filename: 'js/[name].js',
        chunkFilename: 'js/[id].js'
    }

這樣就可以實現頁面js資源按需載入了，打包後的文件命名可以根據自己需要設置。

react-router v4 中文官網：http://reacttraining.cn/web/guides/quick-start