using import() in react-router-dom/webpack2

Question

I googled it but still don't know how to use import() along with react-router-dom (version 4.x) to achieve code-splitting/async-route effect.

I am using webpack2

The doc of react-router-dom use bundle-loader . But I thought import() is supported natively by webpack2 . Is there a way to use import() directly?

Thanks

Answer 1

https://github.com/brotzky/code-splitting-react-webpack

https://brotzky.co/blog/code-splitting-react-router-webpack-2/

Checkout this out, I follow the steps and finish dynamic code require for my project.

Answer 2

Anyway, I figure it out myself.

It kind of works at the moment. But I've test it in real world. APPRECIATE to point out bugs in the snippet.

Thanks.

First have a component like this

//@flow

import React from "react";

import { Loading } from "../loading";

let map = {};

export function AsyncLoad(props: {
    moduleKey: string,
    loadedFrom: Promise<any>,
    onLoaded: () => void
}) {
    let Comp = map[props.moduleKey];
    if (Comp) {
        let passedProp = Object.assign({}, props);
        delete passedProp.moduleKey;
        delete passedProp.loadedFrom;
        return <Comp {...props} />;
    } else {
        processModule();
        return <Loading />;
    }

    async function processModule() {
        const mod = await props.loadedFrom;
        map[props.moduleKey] = mod.default;
        props.onLoaded();
    }
}

Then in my App.js, do like this:

//@flow

import React, { PureComponent } from "react";

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import { AsyncLoad } from "./asyncLoad";

import "./app.scss";

export class App extends PureComponent {
    render() {
        return (
            <Router>
                <div>
                    <Link to="/quiz">Show Quiz</Link>
                    <div className="content">
                        <Route
                            path="/quiz"
                            component={() =>
                                <AsyncLoad
                                    moduleKey="quiz"
                                    loadedFrom={import("./quiz")}
                                    onLoaded={() => {
                                        this.forceUpdate();
                                    }}
                                />}
                        />
                    </div>
                </div>
            </Router>
        );
    }
}

Answer 3

very simple

<Route path="/page3" render={() => (
  <AC loader={import('./Page3')} />
)} />


class AC extends Component {
  state = {
    _: null
  }
  async componentDidMount() {
    const { default: _ } = await this.props.loader;
    this.setState({
      _: <_ />
    });
  }
  render() {
    return (
      <div>{this.state._}</div>
    );
  }
}