Question

我用Google搜索但仍然不知道如何使用import()和react-router-dom (version 4.x)来实现代码分割/异步路由效果。

我正在使用webpack2

react-router-dom的文档使用bundle-loader。但我认为import()原生支持webpack2。有没有办法直接使用import()？

由于

Answer 1

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

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

检查出来，我按照步骤完成项目的动态代码要求。

Answer 2

无论如何，我自己弄清楚了。

此刻有点奏效。但我在现实世界中测试它。 APPRECIATE指出代码段中的错误。

感谢。

首先有一个像这样的组件

//@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();
    }
}

然后在我的App.js中，这样做：

//@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

非常简单

<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>
    );
  }
}

在react-router-dom / webpack2

3 个答案: