Webpack懒散的供应商捆绑？

Question

我正在尝试将两个显式的vendor-trunk示例与webpack中的代码拆分相结合。 但无法使其发挥作用。

我有两个页面（不是真正的页面，它是使用react和react-router的SPA）：

• /：只需要vendor.js
• / d3：需要vendor.js和d3.js

目标是：访问/时，只加载app.js和vendor.js 。 当用户导航到/ d3时，根据需要加载d3.js 我是这样尝试的：

webpack 配置 ：

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,
  }),
  ...
],

Router.jsx ：

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

此配置无法按预期工作，因为生成了d3.js包但其他包完全忽略。 并且d3.js也在块1.1.js重复。 那我怎么能让它发挥作用呢？ 我需要这个配置，因为d3太大并且减慢了主页上的初始加载速度。 此外，我需要对vendor.js和d3.js进行长期缓存，因此必须将它们拆分为供应商块。