Question

该项目是使用vue-cli / webpack生成的。其中一个依赖项是 echarts ，它是一个开源图表库。在图书馆内有一个用于绘制地图的区域数据文件夹（node_modules/echarts/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默认设置，有三个包：供应商，清单，应用程序。所以我的计划是增加一个区域捆绑。但事实证明它没有按预期工作 - 没有生成区域包。

有什么想法吗？我现在使用webpack 3.3.0。

Answer 1

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

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

但是，region块仍然从一开始就加载。我仍然无法按需加载它。当我将其设置为async: true时，应用会中断。有什么想法吗？

使用Webpack捆绑多个供应商块

1 个答案: