Question

我希望能够根据不同的用户类型异步加载React组件。例如，当用户A在应用程序周围导航时，他们的组件集将通过异步加载。然后，当用户B使用该应用程序时，他们会收到一组不同的组件，这些组件也通过异步加载。

目前我正在使用React Router和Redux。我还使用Webpack来创建加载异步的组件块，如下所示：

background-image: -webkit-radial-gradient(100px,
   #1493a4 0%,
   rgba(20,147,164,0.4) 40%,
   rgba(20,147,164,0.2) 55%,
   transparent 100%
);

但是当我尝试扩展它以动态加载组件时，它不起作用。我创建了一个对象数组，其中包含我要加载的所有组件......

<Route
  path="/"
  getComponent={(location, callback) => {
    require.ensure([], (require) => {
      callback(null, require('./app/App.jsx').default);
    }, 'App');
  }}
>

然后我使用map为这些组件中的每一个创建路径......

{
  components: [
    {
      id: 0,
      name: 'Dashboard',
      src: './dashboard/Dashboard.jsx',
      indexRoute: true,
      path: '/',
    },
    {
      id: 1,
      name: 'Quote',
      src: './quote/Quote.jsx',
      indexRoute: false,
      path: '/quote',
    },
  ],
}

但是当我将创建的路线插入主路线时......

const routes = components.map((component) => {

  if (component.indexRoute) {
    return (
      <IndexRoute
        getComponent={(location, callback) => {
          require.ensure([], (require) => {
            callback(null, require(component.src).default);
          }, component.name);
        }}
        key={component.id}
      />
    );
  }

  return (
    <Route
      path={component.path}
      getComponent={(location, callback) => {
        require.ensure([], (require) => {
          callback(null, require(component.src).default);
        }, component.name);
      }}
      key={component.id}
    />
  );
});

我收到以下错误：

<Route
  path="/"
  getComponent={(location, callback) => {
    require.ensure([], (require) => {
      callback(null, require('./app/App.jsx').default);
    }, 'App');
  }}
>
  {routes}
</Route>

并警告：

Uncaught TypeError: __webpack_require__(...).ensure is not a function

我认为这是因为Webpack需要知道它在构建时编译的块是什么？这是问题，有没有办法解决这个问题？甚至是更好的解决方案？

由于

Answer 1

对于在稍后阶段遇到此问题的任何人，我设法通过创建一个包含我的应用程序可能加载的所有异步组件的对象来解决此问题。每个组件路由定义都有它的require.ensure函数定义如此......

const asyncComponents = [
  {
    id: 0,
    name: 'Dashboard',
    require: (location, callback) => {
      require.ensure([], (require) => {
        callback(null, require('./dashboard/Dashboard.jsx').default);
      }, 'Dashboard');
    },
  },
];

export default asyncComponents;

这样做会在某些时候不可避免地面临扩展问题，因为您必须维护所有组件的单独列表。它虽然现在有效。

如何根据不同的服务器端状态异步加载React组件？

1 个答案: