webpack代码拆分包未按需加载

Question

我有一个简单的webpack@4 + react-loadable设置用于代码拆分，在构建它时，我看到我的捆绑包已经被使用react-loadable构建的组件分开了。问题是，即使尚未访问或加载这些捆绑包，这些捆绑包也会与主捆绑包一起加载。

// routes.js
<Route>
  <IndexRoute component={HomeScreen} />
  <Route path="user" component={UserLayout}>
    <IndexRoute component={UserAsyncScreen} />
  </Route>
</Route>

// UserAsyncScreen.js
const UserAsyncScreen = Loadable({
  loader: () => import(./UserScreen')
})

在这种情况下，当我打开本地路由时，从devtools上的Network（网络）选项卡中，我可以看到UserAsyncScreen的捆绑软件已经下载。

我能想到的是，由于我仍然使用旧的react-router@2.8.1并使用集中式路由，因此由于我们在主路由器中定义了所有组件，因此将加载捆绑包。

我不确定我的想法是否正确，还是在需要时动态加载捆绑软件时出现了错误的概念。但是从我现在的情况来看，就是将主要捆绑包分成小块。