1. 程式人生 > >webpack 的異步組件 生成commonchunks

webpack 的異步組件 生成commonchunks

ext keys bpa node ide extra pack 發現 commons

 1     new webpack.optimize.CommonsChunkPlugin({
 3       async: ‘async-common‘,
 4       minChunks: function (module, count) {
 5         // any required modules inside node_modules are extracted to vendor
 6         return (
 7           count >= 2
 8         )
 9       }
10     })

上述代碼是將異步組件的公共組件打包到async-common中,但是build後通過 Webpack Bundle Analyzer 查看,發現並無效果.

正確配置如下:

    new webpack.optimize.CommonsChunkPlugin({
      names: Object.keys(utils.getEntries()),
      async: ‘async-common‘,
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          count >= 2
        )
      }
    })

  如上邊代碼,需要添加name或者names,此選項為entry的名字,因為我是多頁面且多個入口,所以使用names, 通過Object.keys(utils.getEntries()) 獲取我全部的入口名

webpack 的異步組件 生成commonchunks