将多个供应商区块与Webpack捆绑在一起

该项目是使用vue cli/webpack生成的。它的一个依赖项是echarts，这是一个开源的图表库。在库中有一个用于绘制地图的区域数据文件夹（

node\u modules/echart/maps/

）

由于该项目严重依赖echarts，我希望从一开始就加载核心库。但是，只有一两个页面有区域地图，所以我希望区域数据（数据非常大）单独绑定并根据需要延迟加载

...
plugins: [
  ...
  // split map region into its own file
  new webpack.optimize.CommonsChunkPlugin({
    async: 'region',
    minChunks: function ({resource}) {
      return (
        resource &&
        /\.js$/.test(resource) &&
        resource.contains('node_modules/echarts/map/js')
      )
    }
  }),
  // split vendor js into its own file
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: function ({resource}) {
      return (
        resource &&
        /\.js$/.test(resource) &&
        resource.contains('node_modules/') &&
        !resource.contains('node_modules/echarts/map/js')
      )
    }
  }),
  ...
]
...

基本上，这个想法是将npm包的一部分捆绑到一个块中，将npm包的其余部分捆绑到另一个块中。根据vue cli/webpack默认设置，有三个捆绑包：供应商、清单和应用程序。因此，我的计划是有一个额外的地区捆绑。但结果并不像预期的那样——没有生成区域绑定

---

有什么想法吗？我现在使用Webpack3.3.0。

我成功地生成了多个块，顺序很重要。这允许应用程序利用并行下载

...
plugins: [
  ...
  // split vendor js into its own file
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: function ({resource}) {
      return (
        resource &&
        /\.js$/.test(resource) &&
        resource.contains('node_modules')
      )
    }
  }),
  // split map region js into its own file
  new webpack.optimize.CommonsChunkPlugin({
    name: 'region',
    chunks: ['vendor'],
    minChunks: function ({resource}) {
      return (
        resource &&
        /\.js$/.test(resource) &&
        resource.contains('node_modules/echarts/map/js')
      )
    }
  }),
  ...
]
...

但是，

区域

区块仍然从一开始就被加载。我还是无法按需加载。当我将其设置为

async:true

时，应用程序中断。有什么想法吗