react-loadable -动态加载的代码仍在捆绑

Question

我有以下代码，其中boxes.jsx应该在命中特定路由时动态加载：

...
import Loadable from 'react-loadable';
const LoadableBoxes = Loadable({
    loader: () => import('../pages/boxes/boxes.jsx'),
    loading: () => <div>Loading</div>
});

class AppWrapperLoggedInContainer extends Component {
  ...
  render() {
    return (
      <AppWrapperLoggedIn>
        <Switch>
          <Route exact path={core.urls.pages.pathBoxes()} component={restricted(LoadableBoxes)} />
          <Route exact path={core.urls.pages.pathOrganiser()} component={restricted(Organizer)} />
          <Route component={Error404} />
        </Switch>
      </AppWrapperLoggedIn>
    );
  }
}

但是，我可以看到该文件正由Webpack捆绑在主app.*.js捆绑包中，而当我到达该路径时，另一个捆绑包不会被动态加载。你知道为什么这不起作用吗--我已经检查了代码库和boxes.jsx文件没有被导入到其他地方？

Answer 1

动态导入需要符合ES2015模块系统或更高版本的模块类型和相应的模块加载器。在您的项目中，情况可能并非如此，所以webpack忽略了动态导入。Webpack支持的模块类型有：link。要支持动态导入，您需要考虑使用esnext。