javascript - Webpack 和 React getComponent() 未异步加载组件

Question

我正在使用 Webpack 3.7.1 和 React 15.6.1，并且我正在尝试动态加载不同的组件。

我想做什么

• 从代码分割时创建的不同 block webpack 异步加载组件

我做了什么

• 使用 getComponent() 和 import() 生成 block
• 正确配置 webpack.config 文件以便创建 block (代码分割)

问题

• 访问路由时， block 会生成但未正确加载
• getComponent() 似乎不起作用

我的 Webpack.config 文件

module.exports = {
  devServer: {
    historyApiFallback: true
  },
  entry: {
    app:"./src/index.js",
    vendor: [
      "axios",
      "react",
      "react-dom",
      "react-redux",
      "react-router",
      "react-router-dom",
      "redux"
    ]
  },
  output: {
    path: __dirname + '/public/views',
    filename: '[name].js',
    chunkFilename: '[chunkhash].chunk.js',
    publicPath: "/views/"
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: [/node_modules/, /pdfmake.js$/]
      },
      {
        test: /\.json$/,
        loader: "json-loader"
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: Infinity
    }),
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
      filename:  __dirname + "/views/index.ejs",
      template: __dirname + "/views/template.ejs",
      inject: 'body',
      chunks: ['vendor', 'app'],
      chunksSortMode: 'manual'
    }),
    new PreloadWebpackPlugin({
      rel: "preload",
      include: ["vendor", "app"]
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
  ]
};

我的index.js文件(我的react应用程序的根目录)

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import promise from "redux-promise";
import reducers from "./reducers";
import AppInit from "./containers/appInit";



import ProfRegisteringModal from "./containers/modals/register_prof_explanation_modal";

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

function errorLoading(err) {
  console.error("Dynamic page loading failed", err);
}

function loadRoute(cb) {
  return module => cb(null, module.default);
}

console.log("testst");

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <AppInit>
      <BrowserRouter>
        <div style={{ height: "100%" }}>
          <ProfRegisteringModal />
          <Switch>
            <Route
              path="/inscription/:user"
              getComponent={(location, callback) => {
                import(
                  "./components/registering/registering_landing_page.js"
                )
                  .then(loadRoute(cb))
                  .catch(errorLoading);
              }}
            />
            <Route
              path="/inscription"
              getComponent={(location, callback) => {
                import(
                  "./components/registering/registering_landing_page.js"
                )
                  .then(loadRoute(cb))
                  .catch(errorLoading);
              }}
            />
            <Route
              path="/connexion"
              getComponent={(location, callback) => {
                import("./containers/registering/signing_in.js")
                  .then(loadRoute(cb))
                  .catch(errorLoading);
              }}
            />
            <Route
              path="/equipe"
              getComponent={(location, callback) => {
                import("./components/team_pres.js")
                  .then(loadRoute(cb))
                  .catch(errorLoading);
              }}
            />
            <Route
              path="/"
              getComponent={(location, callback) => {
                import("./containers/app_container.js")
                  .then(loadRoute(cb))
                  .catch(errorLoading);
              }}
            />
          </Switch>
        </div>
      </BrowserRouter>
    </AppInit>
  </Provider>,
  document.querySelector(".root")
);

此文件已正确加载，因为我可以看到 console.log("test") 出现在我的控制台中。

访问任何路由时都没有正确加载任何组件。

非常感谢您的帮助

Answer 1

我认为您的代码缺少的是触发更新的方法。我记得通过围绕 import() Promise 创建一个包装器来解决这个问题。

// AsyncComponent.js

export default function wrapper(importComponent) {
  class AsyncComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        Comp: null
      };
    }
    componentDidMount() {
      importComponent()
        .then(Comp => this.setState({
          Comp
        }))
        .catch(err => this.setState({
          error: err
        }));
    }
    render() {
      if(this.state.error) {
        return <h2> Loading error
            <button onClick={e => this.componentDidMount()}> Try again </button>
          </h2>
      }
      const Comp = this.state.Comp;
      return Comp ?
        <Comp {...this.props} /> :
        <div> Still Loading: You can add a spinner here </div>
    }
  }
  return AsyncComponent;
}


// Routes.js

import AsyncComponent from './component/AsyncComponent';

const Users   = AsyncComponent(() => import(/* webpackChunkName:"users"  */ './Users'))
const Home    = AsyncComponent(() => import(/* webpackChunkName:"home"   */ './Home'))
const Equipe  = AsyncComponent(() => import(/* webpackChunkName:"equipe" */ './Equipe'))


<Route path='/users' component={Users} />
<Route path='/equipe' component={Equipe} />