我正在尝试将two-explicit-vendor-trunk示例与webpack中的代码拆分相结合 . 但无法使其发挥作用 .

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

  • /：只需 vendor.js

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

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

webpack config：

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 进行长期缓存，因此两者都必须作为供应商块进行拆分 .

javascript reactjs webpack react-router