Javascript Web包延迟加载的供应商包？

我试图将这个示例与webpack中的代码拆分结合起来。但无法使其发挥作用

我有两个页面（不是真正的页面，它是一个使用react和react路由器的SPA）：

• /：只需

  vendor.js

• /d3：需要

  vendor.js

  和

  d3.js

目标是：访问/时，只加载

app.js

和

vendor.js

。当用户导航到/d3时，会根据需要加载

d3.js

。以下是我的尝试：

:

:

导出默认值(
...
{
要求。确保（[]，（要求）=>{
回调（null，require（'./pages/D3'）。默认值）；
});
}} />
...
);

由于生成了

d3.js

捆绑包，但其他捆绑包完全忽略了该配置，因此该配置无法按预期工作。而

d3.js

也在chunk

1.1.js

中重复。那么，我如何才能让它发挥作用呢？我需要这种配置，因为d3太大，会大大降低主页上的初始加载速度。此外，我需要在

vendor.js

和

d3.js

上进行长期缓存，因此两者都必须作为vendor块进行分割

entry: { 
  vendor: [ 
    'react',
    'react-dom',
    'react-router',
    ...
  ],
  d3: [ 
    'd3',
  ],
  app: [
      './src/js/index',
  ],
},
plugins: [ 
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: Infinity,
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'd3',
    minChunks: Infinity,
    async: true,
  }),
  ...
],

export default (
  <Router history={createBrowserHistory()}>
      ...
      <Route path="d3" getComponent={(location, callback) => {
        require.ensure([], (require) => {
          callback(null, require('./pages/D3').default);
        });
      }} />
      ...
  </Router>
);