Question

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

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

/：仅需componentsJoinedByString()
/ d3：同时需要vendor.js和vendor.js

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

d3.js

Router.jsx：

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

Webpack懒散的供应商捆绑？

0 个答案: